css中图⽚渐变怎么弄,CSS3渐变图⽚滤镜CSS
语⾔：
CSSSCSS
确定
*, ::before, ::after {
-moz-box-sizing: border-box;
box-sizing: border-box; }
body {
background: white;
font: normal 16px/1.4 'Source Sans Pro', sans-serif;
margin: 0; }
img {
max-width: 100%;
vertical-align: middle;
-webkit-filter: grayscale(100%) contrast(0.9);
-moz-filter: grayscale(100%) contrast(0.9);
filter: grayscale(100%) contrast(0.9); }
a {
color: #428bca; }
.container {
margin: 0 auto;
max-width: 500px; }
.
title {
text-align: center;
font-weight: normal;
margin-top: 25px;
margin-bottom: 25px; }
.item {
position: relative;
margin-bottom: 25px;
border-radius: 2px;
overflow: hidden;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15); }
.
item:after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
box sizingbottom: 0;
left: 0;
opacity: 0.55; }
.item--first:after {
background-image: -webkit-linear-gradient(45deg, #1199c4, #b10dc9); background-image: linear-gradient(45deg, #1199c4, #b10dc9); }
.item--second:after {
background-image: -webkit-linear-gradient(10deg, orange, #810000); background-image: linear-gradient(80deg, orange, #810000);
opacity: 0.55; }
.item--third:after {
background-image: -webkit-linear-gradient(280deg, lightgreen, #39cccc); background-image: linear-gradient(170deg, lightgreen, #39cccc); opacity: 0.65; }
.item--fourth:after {
background-image: -webkit-linear-gradient(45deg, #00009a, #b300b3); background-image: linear-gradient(45deg, #00009a, #b300b3); opacity: 0.4; }
.item--text {
background-image: -webkit-linear-gradient(0deg, #ededed, #dadada); background-image: linear-gradient(90deg, #ededed, #dadada);
padding: 15px; }
.item--text ol {
padding-left: 22px;
margin-top: 0;
margin-bottom: 0; }
.item--text li {
margin-bottom: 12px; }
.item--sixth:after {
background-image: -webkit-linear-gradient(80deg, #f012be, #008a00); background-image: linear-gradient(10deg, #f012be, #008a00);
opacity: 0.4; }
.item--seventh:after {
background-image: -webkit-linear-gradient(125deg, #1cbaeb 7%, #f00 90%); background-image: linear-gradient(325deg, #1cbaeb 7%, #f00 90%); opacity: 0.475; }
.item--eighth:after {
background-image: -webkit-linear-gradient(225deg, forestgreen 7%, orange); background-image: linear-gradient(225deg, forestgreen 7%, orange); opacity: 0.5; }
@media (min-width: 875px) {
.container {
max-width: 875px; }
.item {
float: left;
width: 400px;
margin: 0 0 25px 25px; }
.item--third {
width: 825px; }
.item--text {
width: 825px; } }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。