html - 如何使用 CSS3 使用数据属性值设置具有交替行颜色或图像的右 Angular 设计-6ren

html - 如何使用 CSS3 使用数据属性值设置具有交替行颜色或图像的右 Angular 设计

转载作者：行者123 更新时间：2023-11-28 07:24:58

25

4

我有一个场景，我将在包装器下放置多个部分标签，每个部分标签将数据 Angular 作为数据属性，我需要使用 CSS3 创建背景透明的右 Angular 设计。我有两种情况，

我使用交替行颜色，使用 css nth-child(odd)/(even) 将白色设置为奇数，将灰色设置为偶数。
在同一部分中，一些占位符也可以有背景图片。所以我需要为页面下的所有部分设置透明 Angular 设计。所以请告诉我如何使用 CSS3 实现这一点。请不要使用 jquery。

在 Code pen 上查看

CSS 代码

.main-wrap > section:nth-child(odd) {
    background-color: #fff;
}

.main-wrap > section:nth-child(even) {
    background-color: #e0e0e0;
}

.main-wrap > section {
    height: 100px;
    position-relative;
    margin: 0;
    padding: 20px 50px 20px 20px
}

section:before {
    content: "";
    position: absolute;
    top: 0%;
    right: 0%;
    width: 0px;
    height: 0px;
    border-bottom: 60px solid transparent;
    border-right: 60px solid transparent;
}

section:after {
    position: absolute;
    top: 0%;
    right: 0%;
    width: 0px;
    height: 0px;
    border-top: 60px solid transparent;
    border-left: 60px solid transparent;
}

section[data-background="image"] {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

HTML代码

<html>
<body>
  <div class="main-wrap">
    <section data-background="image" style='background-image:url("http://i1.wp.com/static.web-backgrounds.net/uploads/2012/08/City_Landscape_Background.jpg")'>
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex doloremque possimus, facilis libero cumque temporibus, aliquid quaerat voluptas adipisci perspiciatis officia dolores excepturi voluptatem modi iure officiis, dicta ullam beatae.</div>

    </section>
    <section>
    <div>Quis dolorem recusandae id. Veniam dolorum a nemo est ducimus sed laboriosam unde laudantium aspernatur accusamus officia ab fugiat dicta maxime inventore, excepturi eaque, velit iste quaerat? Nobis, inventore, hic.</div>
    </section>
    <section>
     <div>Quis dolorem recusandae id. Veniam dolorum a nemo est ducimus sed laboriosam unde laudantium aspernatur accusamus officia ab fugiat dicta maxime inventore, excepturi eaque, velit iste quaerat? Nobis, inventore, hic.</div>
    </section>
  </div>
</body>

</html>

示例模型设计:

最佳答案

这是我针对特定设计问题的解决方案。它是使用的 css 的变体 here .

/* bevel size, left offset and color settings next 3 lines */ 
.bvc {
    width: 600px; /* width of overall box, variable or fixed */ 
    margin: 0;
    position: relative;
    margin-top: -15px;
    text-align:center;
    font-weight:bolder;
}
.nomarg {
    margin-top:0px !important;
}

.trwhite { border-right-color: white !important; }
.trtrans { border-right-color: #EEE !important; }
.trred { border-right-color: red !important; }
.trgray { border-right-color: gray !important; }

.red, .red > div {
    background:red;
    background-color:red;
}
.red > div {
    border-color:red;
}
.white, .white > div {
    background:white;
    background-color:white;
}
.white > div {
    border-color:white;
}
.gray, .gray > div {
    background:gray;
    background-color:gray;
}
.gray > div {
    border-color:gray;
}
.black, .black > div {
    background:black ;
    background-color:black ;
    color:white;
}
.black > div {
    border-color:black;
}

.bevel, .content { border-width: 15px }
.bevel, .content { border-color: #efefef; border-style:solid; }
.tr, .bevel { 
    height: 0px; 
    width: 100%; 
    border-right-color: transparent; 
    border-top: 0; 
}

.content {
    background: #efefef no-repeat;
    border-top: 0;
    border-bottom: 0;
    width:100%;
    height:80px;
}

body {
    margin: 20px;
    font-family:tahoma;
    font-size:18px;
    background:#EEE;
}

<div class="bvc white nomarg">
    <div class="bevel tr trtrans"></div>
    <div class="content">Section 1</div>
</div>

<div class="bvc red ">
    <div class="bevel tr trwhite"></div>
    <div class="content">Section 2</div>
</div>

<div class="white bvc">
    <div class="bevel tr trred"></div>
    <div class="content">Section 3</div>
</div>

<div class="gray bvc">
    <div class="bevel tr trwhite"></div>
    <div class="content">Section 4</div>
</div>

<div class="white bvc">
    <div class="bevel tr trgray"></div>
    <div class="content">Section 5</div>
</div>

<div class="black bvc">
    <div class="bevel tr trwhite"></div>
    <div class="content">I need this design</div>
</div>

关于html - 如何使用 CSS3 使用数据属性值设置具有交替行颜色或图像的右 Angular 设计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31871461/

25

4

0

文章推荐： c++ - Qt 5.1 如何重命名

文章推荐： ios - 如何强制将 Struct 从 super 类型强制转换为新类型？

文章推荐： javascript - Firefox:onchange 触发而不改变

文章推荐： c++ - 无法打印文件中的文本

javascript - 属性值 VS 属性值
我有一个加载有默认值的元素。后来，我通过 jQuery 的 input.val("different value") 更改了该值。 . 当我 console.log() 元素时，我在 firebug
asp.net-mvc-3 - DropDownListFor 中的 ViewBag 属性值，而不是 Model 属性值
我们在 DropDownListFor(ASP.NET MVC3 版本)中发现了奇怪的行为。它在下拉列表中选择 ViewBag 属性值而不是 Model 属性值。模型: public class C
Magento 属性值 - 添加描述字段
寻找一种方法将描述字段添加到 Magento 中的单个属性值。请注意，我指的是属性值选项，而不是实际的属性本身。举个例子: 属性=颜色属性值:红、绿、蓝我想为 3 种颜色中的每一种添加一个描述字
java - 如何使用反射获取注解类名、属性值
我知道如果我们知道注释类，我们可以轻松获取特定的注释并访问其属性。例如: field.getAnnotation(Class annotationClass) 它将返回特定注释接口(interface
javascript - getComputedStyle 属性值
我正在尝试报告我创建的椭圆形 div 的边框半径值，但我得到了一个未定义的返回值。谁能解释为什么？我是犯了一个简单的错误还是我的代码有问题？谢谢你! CSS3
MySQL返回id，其中出现次数>属性值
我有两个表: Bike__________________________ Kiosk 带列: BikeID, Location_________________ KioskID,
以反冲结尾的 Java 属性值
我在 Java .properties 文件中有一个值需要以反冲结束。属性值应该是“\\server\folder\”，我这样输入值: name=\\\\server\\folder\\ 结尾的反斜杠
javascript 对象实例、属性值
我创建了一个 DeformableShape 对象并通过 for 循环创建它的实例。我正在调用对象的 setPosition 方法并更改其枢轴属性，但所有实例的值都会更新...假设我有对象 A 并且我
来自类名的 CSS 属性值
是否可以在类名中为 CSS 传递参数？例如: .mrg-t-X { margin-top: Xpx; } Test 在此示例中，X 应为 10。最佳答案不，不是。我们最接近的是 attr()
来自类名的 CSS 属性值
是否可以在类名中为 CSS 传递参数？例如: .mrg-t-X { margin-top: Xpx; } Test 在此示例中，X 应为 10。最佳答案不，不是。我们最接近的是 attr()
来自类名的 CSS 属性值
是否可以在类名中为 CSS 传递参数？例如: .mrg-t-X { margin-top: Xpx; } Test 在此示例中，X 应为 10。最佳答案不，不是。我们最接近的是 attr()
c# - 动态注释/属性值
我在使用 C# 中的数据注释时遇到了问题。我正在使用自定义必需属性和范围属性，我想将一个对象设置为错误消息。 [MyOwnRequired(ErrorCode=GlobalMessages.Messa
来自类名的 CSS 属性值
是否可以在类名中为 CSS 传递参数？例如: .mrg-t-X { margin-top: Xpx; } Test 在此示例中，X 应为 10。最佳答案不，不是。我们最接近的是 attr()
java - 如何使用反射获取注释类名称、属性值
我知道如果我们知道注解类，我们可以很容易地得到具体的注解并访问它的属性。例如: field.getAnnotation(Class annotationClass) 这将返回特定注解接口(interf
sinon 不 stub 属性值
我正在使用 sinon v4.1.2。根据文档( http://sinonjs.org/releases/v4.1.2/sandbox/ )，我应该能够使用以下内容设置属性: sandbox.stub
spring - 如何从外部分配一些 Spring 属性值
我想在我的应用程序中将一些 valraibles 的值外部化，它使用 spring 到类似属性文件的东西。我怎样才能做到这一点？最佳答案 Spring 提供了一个 BeanFactoryPostP
c# - 获取泛型类中的接口(interface)属性值
我有这个界面 public interface IMyInterface { IEnumerable Params { get; } } 在哪里 MyParamInfo 是 public c
c# - 屏蔽元素\属性值，使用Linq
我有一个 xml 字符串，其中包含我想要屏蔽的某些值。我还有一个黑名单列表，其中包含我要屏蔽的元素或属性的名称。我如何使用 Linq 执行此操作？ var BlackList=new List{"ss
c# - XPath C# 属性值
以下是读入XmlDocument的XML文件我需要的是存储在一些 TextBox 中的 'id' 属性值(“2015”) 这就是 XmlDocument 的加载方式 XmlDocume
delphi - 如何使对象检查器显示更多 TColor 属性值？
IDE 对象检查器通过下拉 ColorBox 显示 TColor 属性，并且可以按图形单元中定义的名称 - clBlack 等选择颜色。问题是图形单元中定义的 clWeb 颜色不存在，并且我定义的任何

首页

博学

6Ren·AI

商城

html - 如何使用 CSS3 使用数据属性值设置具有交替行颜色或图像的右 Angular 设计