如何使用HTML-CSS将倾斜/倾斜的背景色设置为文本
哈雷·富格拉斯
我需要实现的是类似于以下示例图像中所示的内容。
我需要背景沿着文本增长，因为文本可以是动态的，所以我不能设置静态图像背景。此外，文本应该能够与较暗的背景条纹重叠（如您在示例中的“ lorem”的“ l”中所看到的），并且文本可能多于一行。
欢迎使用跨浏览器解决方案。
弗朗西斯
这样的事情应该可以帮助您入门：
<div class="bottom">
<br>
<div class="under">
<div class="over">
lorem ipsum dolor
</div>
</div>
</div>
.bottom {
background-color: #bbb;
height: 100px;
}
.under {
background-color: #555;
transform: rotate(5deg);
-ms-transform: rotate(5deg); /* IE 9 */
-webkit-transform: rotate(5deg); /* Safari and Chrome */
}
.over {
margin-left: 120px;
color: white;
transform: rotate(-5deg);
-ms-transform: rotate(-5deg); /* IE 9 */
-webkit-transform: rotate(-5deg); /* Safari and Chrome */
}
例子：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何使用javafx / css和fxml将StackPane节点的背景色设置为透明
- 2
如何将swiftui的背景色设置为lightGray？
- 3
如何将内容设置为背景色？
- 4
如何将面板的背景色设置为透明
- 5
如何在倾斜图层（CSS）中倾斜背景图像？
- 6
如何使用Chart.js将图表的背景色设置为渐变
- 7
如何在CSS中为一个元素设置两种背景色？
- 8
如何将弹出式背景色设置为透明
- 9
如何将背景色设置为DevComponents.AdvTree.AdvTree的选定节点？
- 10
如何将元素的背景色设置为该元素的类名的值？
- 11
HTML CSS倾斜/斜角
- 12
如何设置TextView的选定文本背景色
- 13
如何设置TextView的选定文本背景色
- 14
wxpython RichTextCtrl。如何为文本选择设置背景色
- 15
如何使用两个按钮将表格单元格（td）的背景色设置为不同的颜色？
- 16
Angular Material：如何设置背景色（无CSS）
- 17
使用CSS创建一个响应性的倾斜背景
- 18
如何在全局C＃中为Winform中的所有文本框设置背景色？
- 19
如何在HTML页面的div中为文本内容赋予背景色。
- 20
如何在Windows Phone 8.1中将图标和背景色设置为Combox项
- 21
如何使用CSS创建倾斜的边框
- 22
如何在其旁边创建倾斜的倾斜标题文本？
- 23
如何倾斜元素但保持文本正常（未倾斜）
- 24
使用CSS的倾斜边框
- 25
如何为文本添加背景色？
- 26
如何为文本添加背景色？
- 27
使用文本框背景色
- 28
RichEdit，如何设置单行的背景色
- 29
如何设置背景色TabHost
我来说两句