html - 如何为垂直文本赋予2种不同颜色的字体,以使文本1和文本2处于一个“div类”中?

标签 html css

测试将两个文本保存在“背景色:蓝色”上。
我有两个“ div class”:

1)vertical-text1(文本颜色--->白色)

2)vertical-text2(文本颜色--->黄色+字体粗细:粗体)

我的代码:

<div class="video_info">
    <div class="vertical-text1">text 1</div>
    <div class="vertical-text2">text 2</div>
</div>


.video_info
{
    position: fixed;
    left: 30px;
    top: 70%;
}

.vertical-text1
{
    transform: rotate(-90deg);
    color: white;
    background-color: #0000ff;
    position: absolute;
    left: -190px;
    top: -215px;
    width: 400px;
}

.vertical-text2
{
    transform: rotate(-90deg);
    color: yellow;
    font-weight: bold;
    background-color: #0000ff;
    position: absolute;
    left: -40px;
    top: -350px;
    width: 100px;
}


如何为垂直文本赋予2种不同颜色的字体,以使文本1和文本2处于一个“ div类”中?

最佳答案

我认为,如果不以某种方式使两个元素具有不同的样式,您将无法拥有它们。您可以做的是将通用样式移到类内,而将单个样式保持原样,对每个元素都分开(使用ID),因此没有重复的代码。

<div class="video_info">
    <span id="vertical-text1" class="vertical-text">text 1</span>
    <span id="vertical-text2" class="vertical-text">text 2</span>
</div>

.video_info
{
    position: fixed;
    left: 30px;
    top: 70%;
}

.vertical-text {
    transform: rotate(-90deg);
    background-color: #0000ff;
    position: absolute;
}

#vertical-text1
{
    color: white;
    left: -190px;
    top: -215px;
    width: 400px;
}

#vertical-text2
{
    color: yellow;
    font-weight: bold;
    left: -40px;
    top: -350px;
    width: 100px;
}

关于html - 如何为垂直文本赋予2种不同颜色的字体,以使文本1和文本2处于一个“div类”中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38305438/

相关文章:

javascript - 用HTML表单数据调用JS函数

javascript - 两个脚本将不同的监听器添加到同一个元素

html - 来自YouTube之外的其他来源的视频进入了花式框

html - CSS 和表单问题 - 给我冲突 :(

CSS 垂直对齐 :middle not working in IE7

javascript - 使用 JavaScript 在循环中等待转换结束

html - 如何编写有助于浏览器自动完成功能的表单?

javascript - 全宽 slider ,里面有响应元素

javascript - 如何使用 javascript 删除所有内联样式并仅保留 css 样式表中指定的样式?

css - 单击链接后, anchor 悬停保持不变