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转换和背景图像的问题

1 个答案: