在一行中创建背景过渡

Question

我有一行有两个块，当传递图片时，背景图像会在行中打开。

不幸的是，我不能更改太多 html 代码，而我可以用 css 更改它。

因此，当我转到内部图像时，悬停类被添加到该行中。

我希望背景以某种方式过渡。 现在只需要一次拍摄，我无法更改它。

这是我的 CSS：

#rowContattaci {
background: black;
padding-left: 0px !important;
padding-right: 30% !important;
transition: 1s;
min-height:100px;
margin-left: 0% !important;
left: 0px !important;
}
#rowContattaci.hover {
background: url("https://onaliternote.files.wordpress.com/2016/11/wp-1480230666843.jpg?crop");
transition: 2s !important;
}

<div id="rowContattaci" data-vc-full-width="true" data-vc-full-width-init="true" class="vc_row wpb_row vc_row-fluid eightRow sectionContattaci rowHome section" style="position: relative; left: -231.094px; box-sizing: border-box; width: 1920px; padding-left: 231.094px; padding-right: 242.906px;"></div>

Answer 1

它看起来像一个错字。有用的参考： CSS ：悬停选择器

无论如何，将#rowContattaci.hover更改为#rowContattaci:hover以解决您的问题。

更新代码段：

#rowContattaci {
background: black;
padding-left: 0px !important;
padding-right: 30% !important;
transition: 1s;
min-height:100px;
margin-left: 0% !important;
left: 0px !important;
}
#rowContattaci:hover {
background: url("https://onaliternote.files.wordpress.com/2016/11/wp-1480230666843.jpg?crop");
transition: 2s !important;
}

<div id="rowContattaci" data-vc-full-width="true" data-vc-full-width-init="true" class="vc_row wpb_row vc_row-fluid eightRow sectionContattaci rowHome section" style="position: relative; left: -231.094px; box-sizing: border-box; width: 1920px; padding-left: 231.094px; padding-right: 242.906px;"></div>

附言我的建议：

1(将所有样式放在一起，即不要保留一半的样式内联和外部。

2(避免在任何地方都使用！important。

Answer 2

您需要更改几件事才能使示例正常工作：

1. 正如其他人所提到的，您的 css 悬停样式有一个错别字 - 它应该是:hover而不是.hover
2. 您需要在背景图像上应用一些定位和大小调整，否则，您只能看到图像的左上角，它也恰好是黑色的，所以它看起来只是闪烁但不显示徽标。

提示：我也会支持thebrownkid的建议，即分离css样式而不是编写内联css。下面的示例删除了所有不必要的样式。

#rowContattaci {
background-color: black;
padding-right: 30%;
min-height: 100px;
}
#rowContattaci:hover {
background-color: transparent;
background-image: url("https://onaliternote.files.wordpress.com/2016/11/wp-1480230666843.jpg?crop");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transition: 1s;
}

<div id="rowContattaci"></div>

Answer 3

您无法使背景图片在过渡中混合。但是，您可以使用一个技巧，将 2 个div一个放在另一个之上。底部将始终具有背景图像，顶部将在过渡中将颜色从transparent更改为black。

您所要做的就是正确对齐元素。

#rowContattaci {
background-color: black;
background-image: none;
transition: 1s;
min-height:100px;
margin-left: 0% !important;
left: 0px !important;
margin: 0;
}
#rowContattaci:hover {
background-color: transparent;
}
#rowContattaciBack {
background-image: url("https://onaliternote.files.wordpress.com/2016/11/wp-1480230666843.jpg?crop");
background-size: 300px;
}

<div id="rowContattaciBack" style="position: relative; left: -231.094px; box-sizing: border-box; width: 1920px; padding-left: 231.094px; padding-right: 242.906px; margin:0;">
<div id="rowContattaci" data-vc-full-width="true" data-vc-full-width-init="true" class="vc_row wpb_row vc_row-fluid eightRow sectionContattaci rowHome section">
</div>
</div>