如何将形状设置为div [英] how to set a shape to a div
本文介绍了如何将形状设置为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="http://i.stack.imgur.com/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.
http://jsfiddle.net/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="http://i.stack.imgur.com/HtYUn.jpg" style="margin-left: 100px;width:120px;height:120px"/>
</div>
这篇关于如何将形状设置为div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文