【发布时间】：2019-01-03 17:25:04
【问题描述】：
我有一个带有纯背景的 div，它在悬停时变成图像。我想要一个过渡，使淡入淡出效果不是即时的，但我似乎无法完成这项工作。如果我添加 opacity: 0.5 到 .split.left:hover ，我可以让它工作，但文本颜色也会受到影响。如果只是悬停时改变的背景，我会更喜欢。
我想知道这是因为我使用的是 Safari 浏览器还是我只是执行错误？
.split.left {
left: 0;
background: linear-gradient( rgba(255, 255, 255, 1.0), rgba(255, 255, 255, 1.0));
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
border-right: 1px solid #f3f3f3;
}
.split.left:hover {
left: 0;
background: linear-gradient( rgba(34, 47, 61, 0.5), rgba(34, 47, 61, 0.5)), url('../images/img/split-left2.jpg') center center no-repeat;
}<section class="split-menu">
<div class="split-container">
<div class="split left">
<h1>Lorem Ipsum</h1>
<div class="split-menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim neque voluptatibus, modi rerum dolor temporibus architecto sapiente ipsam, ea quae ducimus officiis aliquid odio perspiciatis nisi vitae ad tenetur iste quas suscipit! Aut, nisi corrupti
ducimus magni cumque, illum provident, esse obcaecati illo doloremque, sunt necessitatibus. Laborum pariatur neque sequi natus, ducimus nisi obcaecati necessitatibus magnam perferendis! Ex alias adipisci dolorum nostrum vel reprehenderit accusamus
eum earum consequatur optio illum consectetur itaque, aut minus doloremque ducimus ad perferendis, inventore magnam rerum quaerat recusandae aspernatur harum. Porro debitis, reiciendis facere voluptas eveniet explicabo libero autem pariatur doloremque
tempora quasi modi quis.</div>
<a href="#" class="split-button">Read More</a>
</div>
<div class="split right">
<h1>Lorem Ipsum</h1>
<div class="split-menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus nihil officia a accusamus nulla voluptas mollitia nostrum nesciunt, ducimus quam saepe vitae dolore at consequatur deleniti architecto itaque nobis temporibus adipisci hic. Harum
blanditiis necessitatibus dolore dolorem eius inventore, voluptatibus minima adipisci nesciunt fuga ipsum esse, quasi reiciendis tempora. Similique doloremque odio, eligendi facilis, tenetur, nobis velit quod quasi, sit mollitia aliquam deleniti
ipsum quo illo! Impedit minima tenetur eveniet earum vitae dicta ut odio eius eos, temporibus sint dignissimos quia, molestias, voluptatum. Repellat cum quaerat perspiciatis, a dolores aliquid autem vitae sit, minima quod odit nostrum maxime in
ad.</div>
<a href="#" class="split-button">Read More</a>
</div>
</div>
</section>【问题讨论】：
-
能否也添加必要的html代码？
-
我现在添加了一些 HTML 和额外的 cmets。
-
这类问题不太可能与浏览器有关。但是，如果您想在其他浏览器上进行测试，Browserling 是您的朋友。
-
请更新您的问题以更清楚地说明您想要实现的目标，因为这会导致回答者感到困惑。您希望图像出现延迟，还是过渡淡入？
标签： html css css-transitions