css 过渡和背景图片问题

Question

我现在正在一个网站上工作，当我们将鼠标悬停在表单上时，就会出现一个木偶我的问题是：如何修复和设置我的背景图像以便在动画时显示（因此填充增加）而不是从左向右滑动？

你有什么想法吗？

最佳，

这里是 css 代码

 body .cf7-style.cf7-style-15648 {
  transition: all 1.5s;
}
.sent {
   background-image: url("http://www.site.fr/wp-content/uploads/2017/03/perverse-paul-serre.gif") !important ;
    background-position: right bottom;
  background-repeat: no-repeat;
  padding-right:205px !important;
}
.col.span_12.color-dark.left{
display: flex;
    justify-content: center;
    align-items: center;
}  
form.wpcf7-form.demo.cf7-style.cf7-style-15648:hover{
padding-right: 205px;
  transition: all 0.6s ease-in-out;
}
form.wpcf7-form.demo.cf7-style.cf7-style-15648{}
body .cf7-style.cf7-style-15648{
 padding-right: 10px;
}

@media only screen and (max-width: 767px){
.col.span_12.color-dark.left{
  display: block;
}
  form.wpcf7-form.demo.cf7-style.cf7-style-15648{
     width:100%;
       border:none;
       padding-right:205px;
     }
  .col.span_12.color-dark.left{
     margin-left: 10px;
     }
  .vc_col-sm-7.wpb_column.column_container.col.no-padding.color-dark{
        display: flex;
    justify-content: flex-end;
}
}

Answer 1

由于您的问题不是很清楚，所以我在这里进行了大胆的猜测，但是这里...

在您的表单中，您有以下内容 CSS

body .cf7-style.cf7-style-15648:hover {
    background-image: url(http://www.test.bonnetdejour.fr/wp-content/uploads/2017/03/paul-form-1.gif);
    background-position: right bottom;
    background-repeat: no-repeat;
}

这是在悬停时设置 background-position。当您没有悬停在表单上时，这将使用默认背景位置：

background-position: left top;

如果你在没有悬停的情况下设置元素的背景位置，我想它会做你想要的。

body .cf7-style.cf7-style-15648{
    background-position: right bottom;
    background-repeat: no-repeat;
}

body .cf7-style.cf7-style-15648:hover {
    background-image: url(http://www.test.bonnetdejour.fr/wp-content/uploads/2017/03/paul-form-1.gif);
}

抱歉，如果我全错了，但这是我最好的猜测，因为你的问题不清楚。

css 过渡和背景图片问题

Issues with css transition and background image

html

css

background-image

css-transitions