我正在尝试创建一个可重用的小部件。它将具有某种背景图像,并具有透明文本覆盖。文字叠加的背景大部分是方形的,但有一个透明的角落。有没有简单的方法来使用CSS做到这一点?你如何摆脱div的一个角落在CSS中是透明的?
1
A
回答
1
可以使用linear-gradient
背景。这是您可重用的小部件。干杯!
img {
display: block;
width: 100%;
}
.img-widget {
width: 250px;
height: auto;
position: relative;
}
.img-widget .overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 25%;
background: transparent;
text-align: center;
background-image: linear-gradient(118deg, transparent 0%, transparent 10%, #7AAD7A 10%, #7AAD7A 60%);
display: inline-block;
vertical-align: middle;
}
.img-widget .overlay:after {
display: inline-block;
vertical-align: middle;
content: '';
height: 100%;
}
<div class="img-widget">
<img src="http://placehold.it/200x200" />
<div class="overlay">Some text here</div>
</div>
1
#green-overlay {
background: linear-gradient(135deg, transparent 30px, rgba(0,0,0,.5) 0) top left;
add the rest of your css for this element
}
这样的事情应该工作。只需将rgba值和30px替换为你想要角落的深度即可。
0
尝试类似如下(LIVE PEN HERE):
HTML
<div class="row">
This div has a background image
<div class="divider"><div id="rightDivider"><div></div></div></div>
</div>
CSS
html, body {margin: 0; padding: 0;}
#rightDivider {
width: 80%;
height: 100px;
background: blue;
float: right;
position: absolute;
right: -50px;
}
#rightDivider div{
bottom: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 100px 60px;
border-color: transparent transparent blue transparent;
float: right;
position: relative;
right: 100%;
}
.divider {
position: absolute;
bottom: 100px;
right: 0;
left: 0;
}
.row {
background: orange;
position: relative;
height: 300px;
padding: 0;
margin: 0;}
0
你可以尝试使用CSS3的-webkit-夹路径:多边形();属性来解决你的问题。
请参见参考这里:CSS3 clip-path
相关问题
- 1. CSS - 摆脱透明盒子
- 2. 如何摆脱UIAlertView半透明?
- 3. 如何使透明的位图角落
- 4. CSS:如何摆脱段落第一行的额外空间?
- 5. 摆脱半透明圆css div中的背景色同时拖动
- 6. 在.net中创建一个透明的角落PNG
- 7. 如何摆脱html/css中两个div之间的发际线?
- 8. CSS创建一个透明的div
- 9. 如何摆脱HTML5画布中的默认不透明度?
- 10. 如何在使用边框半径时摆脱角落
- 11. 摆脱Android导航抽屉半透明
- 12. 在一个div创建一个半透明的响应三角
- 13. 你如何摆脱Angular的空间?
- 14. 的Android 9patch不透明角落
- 15. 如何让div定位在另一个div的顶部角落?
- 16. NSView的角落是透明的,但不应该是
- 17. 你可以在图像上覆盖一个透明的div
- 18. 基本CSS - 如何在顶部覆盖一个带有半透明DIV的DIV
- 19. 我该如何摆脱“是你的第一个朋友喜欢这个”?
- 20. 在透明底部边框的div顶部的CSS三角形
- 21. 在Xul中,如何摆脱弹出框的背景色并使其透明?
- 22. 如何摆脱YYSTYPE的重复声明?
- 23. 如何摆脱div的填充区域?
- 24. 如何剪切盒子角落使用具有透明背景的CSS?
- 25. 你如何从舞台的一个角落画一条线到另一个角?
- 26. CSS - 如何摆脱用户代理CSS?
- 27. 摆脱jsfiddle的角色
- 28. css中部分透明的div
- 29. div CSS中的透明度动画
- 30. 摆脱隐藏在css中的空间
不能是边界半径吧? –
我认为只创建了圆角边框? –
您可以使用两个背景图片,图片和其他底部的正方形。 –