本文介绍了如何将形状设置为div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想将一个形状设置为 div 标记。一切正常,但是当我在该形状内设置 img 标签时,它不会很好地显示。
I would like to set a shape to a div tag. Everything works fine, but when I set an img tag inside that shape, it does not show well.
CSS代码:
#chevron{ width: 350px; height: 100px; background: #337AB7; border-radius: 10px 10px 0 0; position: relative; } #chevron:before { content: ''; position: absolute; top: 20px; left: 0; height: 100%; width: 51%; background: #337AB7; -webkit-transform: skew(0deg, 6deg); -moz-transform: skew(0deg, 6deg); -ms-transform: skew(0deg, 6deg); -o-transform: skew(0deg, 6deg); transform: skew(0deg, 6deg); } #chevron:after { content: ''; position: absolute; top: 20px; right: 0; height: 100%; width: 50%; background: #337AB7; -webkit-transform: skew(0deg, -6deg); -moz-transform: skew(0deg, -6deg); -ms-transform: skew(0deg, -6deg); -o-transform: skew(0deg, -6deg); transform: skew(0deg, -6deg); }我的html档案:
<div id="chevron"> <img src="i.stack.imgur/HtYUn.jpg" style="width:120px;height:120px"/> </div>我想设置我的形状( chevron )作为背景,内部元素应在其上。
I want to set my shape (chevron) as a background and the inner elements should be over it.
jsfiddle/45tyb219/2/
推荐答案只需添加 > > > 您也可以将 z-index:-1; 添加到 #chevron:之后。
Just add position: relative; and z-index: 1; to your .img - alternatively you can also add z-index: -1; to the #chevron:after.
#chevron{ width: 350px; height: 100px; background: #337AB7; border-radius: 10px 10px 0 0; position: relative; } #chevron:before { content: ''; position: absolute; top: 20px; left: 0; height: 100%; width: 51%; background: #337AB7; -webkit-transform: skew(0deg, 6deg); -moz-transform: skew(0deg, 6deg); -ms-transform: skew(0deg, 6deg); -o-transform: skew(0deg, 6deg); transform: skew(0deg, 6deg); } #chevron:after { content: ''; position: absolute; top: 20px; right: 0; height: 100%; width: 50%; background: #337AB7; -webkit-transform: skew(0deg, -6deg); -moz-transform: skew(0deg, -6deg); -ms-transform: skew(0deg, -6deg); -o-transform: skew(0deg, -6deg); transform: skew(0deg, -6deg); } img { position: relative; z-index: 1; }
<div id="chevron"> <img src="i.stack.imgur/HtYUn.jpg" style="margin-left: 100px;width:120px;height:120px"/> </div>
更多推荐
如何将形状设置为div
发布评论