html – CSS上的不对称背景阴影

概述我正在尝试在CSS上创建背景效果,目前我只使用形状像示例的背景图像： 但我认为必须有一种方法来对CSS做这种效果,我一直在寻找这个问题太长时间了,我无法在任何地方找到正确的答案,有没有办法做到这一点？ 所以我需要的是用CSS完成的容器的不对称背景. 您可以使用css transform这样做： JSFiddle – DEMO body { background:url('http://th 我正在尝试在CSS上创建背景效果,目前我只使用形状像示例的背景图像：

但我认为必须有一种方法来对CSS做这种效果,我一直在寻找这个问题太长时间了,我无法在任何地方找到正确的答案,有没有办法做到这一点？

所以我需要的是用CSS完成的容器的不对称背景.

解决方法 您可以使用CSS transform这样做：

Jsfiddle – DEMO

body {    background:url('http://thumbs.xdesktopwallpapers.com/wp-content/uploads/2011/11-1/Drops-On-Green-Background-720x405.jpg')}div {    background-color: rgba(0,0.6);    color: #fff;    Font-size: 22px;    wIDth: 600px;    height: 400px;    margin: 0 auto;    -webkit-transform: perspective(600px) rotateX(15deg);    -moz-transform: perspective(600px) rotateX(15deg);    transform: perspective(600px) rotateX(15deg);    display: table;    padding: 0 40px;    Box-sizing: border-Box;}p {    display: table-cell;    vertical-align: mIDdle;    -webkit-transform: perspective(600px) rotateX(-15deg);    -moz-transform: perspective(600px) rotateX(-15deg);    transform: perspective(600px) rotateX(-15deg);}

<div>    <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Proin luctus vestibulum elementum. Vivamus feugiat diam eget aliquet fringilla. Nullam et ex ID dui malesuada bibendum. Duis interdum pharetra nibh sit amet lacinia. Sed sit amet fermentum diam. Nulla euismod libero nibh,ac volutpat nulla luctus vitae. Nulla sit amet lectus odio.</p></div>

总结

以上是内存溢出为你收集整理的html – CSS上的不对称背景阴影全部内容，希望文章能够帮你解决html – CSS上的不对称背景阴影所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。