如何添加“光泽"叠加到div? [英] How to add 'shine' overlay to a div?
问题描述
如何添加下图所示的漂亮叠加层?
How can I add a nice overlay like the one in the following image?
考虑以下HTML,我该如何添加一个叠加层?我知道我可以在其顶部使用渐变,然后对角地应用它,但是我也可以将其弯曲吗?
Consider the following HTML, how would I add an overlay like that? I know I can use a gradient on top of it, and apply it diagonally, but can I curve it as well?
<div class="photostrip">
<div class="overlay" />
<img src="http://i.imgur.com/a21tM.jpg" />
<img src="http://i.imgur.com/a21tM.jpg" />
<img src="http://i.imgur.com/a21tM.jpg" />
</div>
这里是我尝试过的东西(我已经使覆盖层过饱和,因此很容易看到),但它并不是我想要的形状.
Here's something I've tried (I've oversaturated the overlay so it's easily seen), but it's not quite the shape I'm looking for.
body { background-color: #4b74db; }
.photostrip {
margin: 0 auto;
width: 185px;
background-color: #000;
box-shadow: 0px 3px 7px 3px #333;
padding: 7px;
padding-bottom: 2px;
position: relative;
.overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
border-bottom-right-radius: 200px 403px;
/* This adds the nice overlay. */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.60) 0%,rgba(255,255,255,0.05) 100%);
}
img {
display: block;
width: 175px;
height: 120px;
margin: 0 auto;
margin-top: 6px;
margin-bottom: 11px;
}
}
推荐答案
这样对您有用吗? http://codepen.io/defo550/pen/Fcsxo
.photostrip {
margin: 0 auto;
width: 185px;
background-color: #fff;
box-shadow: 0px 3px 7px 3px #333;
padding: 7px;
padding-bottom: 2px;
/* Remove default list stylings*/
list-style: none;
/* provide a position context for our pseudo element */
li {
position: relative;
}
img {
display: block;
width: 175px;
height: 120px;
margin: 0 auto;
margin-top: 6px;
margin-bottom: 11px;
}
}
/* overlay styles
create pseudo element
*/
.photostrip li:after {
content: "";
position: absolute;
/* position above img */
z-index: 5;
width: 175px;
height: 120px;
top: 0;
left: 5px;
/* overlay styles */
background: linear-gradient(135deg, rgba(255,255,255,0.33) 0%,rgba(255,255,255,0.33) 60%,rgba(255,255,255,0) 61%,rgba(255,255,255,0) 100%);
}
<ul class="photostrip">
<li><img /></li>
<li><img /></li>
<li><img /></li>
</ul>
我将您的图像放在无序列表中,然后在li(创建每个图像)上创建了一个伪元素,该元素具有背景渐变,并且具有您上面图像的所需效果(或关闭).
I put your images in an unordered list and then created a pseudo-element on the li (that wraps each image) that has a background gradient with the desired effect ( or close ) of your image above.
您还可以在CSS中分别定位每个li以改变背景渐变.
You could also target each li separately in the CSS to change up the background gradient.
这篇关于如何添加“光泽"叠加到div?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!