时间戳

首页 > 解决方案 > CSS悬停以清除背景上的线性渐变失败

html - CSS悬停以清除背景上的线性渐变失败

问题描述

我想清除背景图像上的深色线性渐变，但尝试了它不起作用，它也有闪烁的问题。

.image {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg') center no-repeat;
  background-size: cover;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  transition: background 0.2s ease;
}

.image:hover {
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg') center no-repeat;
  background-size: cover;
}
<div class="image">
</div>

标签： htmlcss

解决方案

尝试使用 :before

.image {
  position:relative;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg') center no-repeat;
  background-size: cover;
  width: 100px;
  height: 100px;
  border-radius: 10px;
}
.image:before{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  content:'';
  border-radius: 10px;
  opacity:1;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
  transition: opacity 0.2s ease;
}
.image:hover:before{
  opacity:0;
}
<div class="image"></div>

推荐阅读