CSS悬停过渡与不透明度

时间：2018-07-26 16:25:14

标签： html css css-transitions

我的div带有纯色背景，在悬停时会变成图像。我想要一个过渡，以使淡入淡出效果不是即时的，但我似乎无法使它起作用。如果我将不透明度：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>

3 个答案:

答案 0 :(得分：2)

我通过here为您创建了一个工作提琴。

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

答案 1 :(得分：1)

您可以使用过渡延迟，但可能需要将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>

希望这会有所帮助

答案 2 :(得分：1)

使用opacity时，同样会影响.split.left的内容。

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

它还可以使内容保持干净，并且不需要额外的标记。

堆栈片段

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

相关问题
最新问题