仅在无重复背景图像上应用背景渐变
仅在无重复背景图像上应用背景渐变
提问于 2019-12-29 18:16:15
我正尝试在元素的右上角插入一个背景图像，并使用渐变淡入淡出。问题是梯度是通过整个元素拉伸的，而不仅仅是在没有重复的图像上。
.bg {
/* manually set size for demostration purposes */
width: 800px;
height: 1600px;
background-repeat: no-repeat;
background-position-x: right;
background-color: rgba(66, 66, 66, 1);
background-image: linear-gradient(45deg, rgba(66, 66, 66, 1), rgba(66, 66, 66, 0.8)), url("https://img.scryfall.com/cards/art_crop/front/b/d/bd8fa327-dd41-4737-8f19-2cf5eb1f7cdd.jpg?1562933099");
}<div class="bg" />
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-12-30 09:44:57
多亏了this answer，我才能解决我的问题。这是完成的代码片段。
.bg {
/* manually set size for demostration purposes */
width: 800px;
height: 600px;
position: relative;
background-color: #424242;
}
.image {
position: absolute;
top: 0;
right: 0;
width: 75%;
}
.image:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
display: inline-block;
background-image: radial-gradient(ellipse at top 35% right 35%, rgba(66,66,66,0.8) 0%, #424242 70%);
}
.image img {
width: 100%;
}<div class="bg">
<div class="image">
<img src="https://img.scryfall.com/cards/art_crop/front/b/d/bd8fa327-dd41-4737-8f19-2cf5eb1f7cdd.jpg?1562933099" />
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59522059
复制相关文章
相似问题
腾讯云开发者
