2016-03-02 49 views
-4

我要添加光泽外观的背景颜色或图像色彩或图片,但我想有时一半的颜色,有时完整的东西应该是glossy.some网站正在使用RGBA和一些正在使用的梯度。哪种方法好,可以采用。 举个例子,想知道两者的区别。光泽的外观为使用CSS

回答

0

请参阅下面的光泽效果的解决方案。您可以根据需要通过CSS修改光面效果。

.photo { 
 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 2px 3px rgba(0, 0, 0, 0.5); 
 
    display: block; 
 
    height: 401px; 
 
    margin: 30px auto; 
 
    position: relative; 
 
    width: 602px; 
 
} 
 

 

 
.photo::before { 
 
    background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.30), rgba(0, 0, 0, 0.25)) repeat scroll 0 0%, rgba(0, 0, 0, 0) -moz-linear-gradient(left top , rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.30) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)) repeat scroll 0 0; 
 
    bottom: 0; 
 
    content: ""; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
}
<div class="photo"> 
 
\t \t \t <img alt="Bag" src="http://wellnesscounselingmilwaukee.com/wp-content/uploads/2015/07/4-Nature-Wallpapers-2014-1.jpg"> 
 
</div>