使用 CSS 制作曲线形状
Making Curvy shape using CSS
您好,我想在我网站的横幅图片上制作一个浅灰色 (#444) 的曲线叠加层。我附上了我想要的图片。
您可以使用多个背景和 radial-gradient
。 Here's an example.
编辑 这是该示例中的 CSS。
#banner{
width:400px;
height:200px;
background:radial-gradient(circle farthest-corner at 100% 50%,rgba(68,68,68,0) 60%,#444 70%),url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Sun-in-the-sky.jpg/800px-Sun-in-the-sky.jpg);
background-size:cover;
}
这可以通过使用 CSS 径向渐变来实现。
您可以使用额外的 div,或者如果您愿意,可以使用伪元素。
我已经使用了多个 div 来向您展示全部构建在一起的效果。
.container {
width: 900px;
height: 300px;
position: relative;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: -webkit-radial-gradient(100% 21.875%, transparent 0%, transparent 20%, #444 45%);
background: radial-gradient(at 100% 21.875%, transparent 0%, transparent 20%, #444 45%);
background-size: 100% 225%;
}
.overlay .text {
width: 50%;
padding: 20px;
color: white;
}
<div class="container">
<img src="http://lorempixel.com/900/300/" width="100%" height="auto" />
<div class="overlay">
<div class="text">
<p>Some Text</p>
</div>
</div>
</div>
绝对定位 div 作为覆盖
使用叠加层和绝对位置,您可以创建灰色叠加层。
.container {
position: absolute;
display: inline-block;
width: 400px;
height: 200px;
background-color: #444;
background-image: url("http://www.lorempixel.com/400/200/");
color: white;
overflow: hidden;
}
.overlay {
position: absolute;
width: 70%;
height: 150%;
background: radial-gradient(ellipse at 100% 50%, transparent 40%, #444 60%);
top: -25%;
}
.container p {
position: relative;
margin-left: 2em;
}
<div class="container">
<div class="overlay"></div>
<p>Text</p>
</div>
您好,我想在我网站的横幅图片上制作一个浅灰色 (#444) 的曲线叠加层。我附上了我想要的图片。
您可以使用多个背景和 radial-gradient
。 Here's an example.
编辑 这是该示例中的 CSS。
#banner{
width:400px;
height:200px;
background:radial-gradient(circle farthest-corner at 100% 50%,rgba(68,68,68,0) 60%,#444 70%),url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Sun-in-the-sky.jpg/800px-Sun-in-the-sky.jpg);
background-size:cover;
}
这可以通过使用 CSS 径向渐变来实现。
您可以使用额外的 div,或者如果您愿意,可以使用伪元素。
我已经使用了多个 div 来向您展示全部构建在一起的效果。
.container {
width: 900px;
height: 300px;
position: relative;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: -webkit-radial-gradient(100% 21.875%, transparent 0%, transparent 20%, #444 45%);
background: radial-gradient(at 100% 21.875%, transparent 0%, transparent 20%, #444 45%);
background-size: 100% 225%;
}
.overlay .text {
width: 50%;
padding: 20px;
color: white;
}
<div class="container">
<img src="http://lorempixel.com/900/300/" width="100%" height="auto" />
<div class="overlay">
<div class="text">
<p>Some Text</p>
</div>
</div>
</div>
绝对定位 div 作为覆盖
使用叠加层和绝对位置,您可以创建灰色叠加层。
.container {
position: absolute;
display: inline-block;
width: 400px;
height: 200px;
background-color: #444;
background-image: url("http://www.lorempixel.com/400/200/");
color: white;
overflow: hidden;
}
.overlay {
position: absolute;
width: 70%;
height: 150%;
background: radial-gradient(ellipse at 100% 50%, transparent 40%, #444 60%);
top: -25%;
}
.container p {
position: relative;
margin-left: 2em;
}
<div class="container">
<div class="overlay"></div>
<p>Text</p>
</div>