具有不透明度的CSS悬停过渡

Question

我有一个带有普通背景的div，它可以在悬停时变成图像。我想要一个过渡，这样的褪色效果不是即时的，但我似乎无法做到这一点。如果我向.split.left:hover添加一个不透明度: 0.5，那么文本的颜色也会受到影响，我就可以让它工作。如果只是背景在悬停时发生了变化，我会更好地接受。

我想知道这是因为我使用了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>

​

Answer 1

我在这里上为您创建了一个工作小提琴。

我用position: absolute制作了自己的div映像，然后在position: relative中制作了它的容器和文本。

​

.split.left {
  position: relative;
  border-right: 1px solid #f3f3f3;
}

.split.left .image {
  opacity: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient( rgba(34, 47, 61, 0.5), rgba(34, 47, 61, 0.5)), url('https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg') center center no-repeat;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

.split.left:hover .image {
  opacity: 1;
}

h1,
.split-menu-text,
a.split-button {
  position: relative;
  z-index: 1;
}

<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 class="image"></div>
    </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>

​

Answer 2

在使用opacity时，它也会影响.split.left的内容。

这里的一个选项是对渐变/背景图像使用伪元素，您可以轻松地将其淡入/输出w/o，从而影响到其他内容。

它还保持了整洁，不需要额外的标记。

堆栈段

​

.split.left {
  position: relative ;
  border-right: 1px solid #f3f3f3;
}
.split.left > * {
  position: relative ;              /*  this will avoid using z-index on pseudo  */
}

.split.left::before {
  content: '';
  opacity: 0;
  transition: opacity 1s linear;
  position: absolute;
  left: 0; top: 0;
  right: 0; bottom: 0;  
  background: linear-gradient(
    rgba(34, 47, 61, 0.1),
    rgba(34, 47, 61, 0.5)),
    url('http://placehold.it/300x100/faa/faa') center center no-repeat;
}

.split.left:hover::before {
  opacity: 1;
}

<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>

​

在背景显示之前，这一个在悬停时有延迟。

堆栈段

​

.split.left {
  position: relative ;
  border-right: 1px solid #f3f3f3;
}
.split.left > * {
  position: relative ;
}

.split.left::before {
  content: '';
  opacity: 0;
  transition: opacity 1s 0s linear;
  position: absolute;
  left: 0; top: 0;
  right: 0; bottom: 0;  
  background: linear-gradient(
    rgba(34, 47, 61, 0.1),
    rgba(34, 47, 61, 0.5)),
    url('http://placehold.it/300x100/faa/faa') center center no-repeat;
}

.split.left:hover::before {
  opacity: 1;
  transition: opacity 1s .5s linear;
}

<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>

​

Answer 3

您可以使用转换延迟，但您可能需要将background分别分解为图像和颜色。

​

.split.left {
  left: 0;
 
  transition: 0s background-color;
  -moz-transition: 0s background-color;
  -webkit-transition: 0s background-color;
  border-right: 1px solid #f3f3f3;
    
}

.split.left:hover {
  left: 0;
  background-color: rgba(34, 47, 61, 0.5);
  background-image: url('../images/img/split-left2.jpg') center center no-repeat;
   transition-delay: 1s;
   
  }

<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>

​

希望这能有所帮助