gpt4 book ai didi

html - div两侧的颜色逐渐变透明

转载 作者:太空宇宙 更新时间:2023-11-03 19:39:35 25 4
gpt4 key购买 nike

我需要使用 CSS 在 div 的每一侧创建颜色渐变的 strip ,如下图所示。怎么做?

div with fading colour on both sides

最佳答案

在纯色上:

要使两侧的颜色变淡,您可以使用 2 inset box-shadows具有正模糊和负扩散半径:

DEMO

body {
background: #D4D4CC;
}
div {
height: 100px;
background: #fff;
box-shadow: inset 100px 0px 100px -50px #D4D4CC,
inset -100px 0px 100px -50px #D4D4CC;
}
<div></div>


在图像上:

如果您需要在图像或非纯色上淡化双面,您可以将此方法与伪元素和框阴影一起使用:

输出:

div fading on both sides over image

div{
height:100px;
overflow:hidden;
padding:0 100px;
margin:20px;
}
div:before{
content:'';
display:block;
height:100%;
background:#D4D4CC;
box-shadow: 0px 0px 80px 50px #D4D4CC;
}

body{
background: url('http://i.imgur.com/hPLqUtN.jpg');
background-size:cover;
}
<div></div>

请注意 IE9 and over 支持框阴影

关于html - div两侧的颜色逐渐变透明,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28982198/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com