Question

我正在尝试制作类似这样的东西

这里中间的色带是图像。周围的渐变应该用CSS制作。

我的目标是让一个元素成为页面上的标题，并在该标题下显示。代码是这样的。

    <h1 class="page-title">This is a Title</h1>

因此，通过将该类添加到h1，图像将显示在下面。我正在尝试这样的事情。

    h1.page-title {
      display: block;
    }
    h1.page-title::after {
      content: url(./path/to/image);
      display: block;
    }

这样做了我试图通过添加下面的图像来做但我不知道如何添加渐变，因为无法添加多个伪后元素。

我希望能够使用一个HTML标记执行此操作，但我也无法用两个标记来解决这个问题。任何帮助表示赞赏。

编辑：这就是我想让最终产品看起来像

Answer 1

使用伪元素之前和之后，我们可以将单个DOM元素转换为3。

您要做的是在h1元素本身上设置背景图像，并为您的行使用:: before和:: after伪元素。

这是我提出的CSS：

h1.page-title {
      position: relative;
  display: inline-block;
      background-image: url('https://media.istockphoto.com/photos/red-ribbon-picture-id473856462?k=6&m=473856462&s=612x612&w=0&h=VMdTIdIJCbQ8CjHmb90ywhRB561z_XKx09eI6qJXMF0=');
  background-repeat: no-repeat;
  background-position: 50%;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
    }
.page-title:before,
.page-title:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid blue;
  top: 0;
  width: 300px;
}
.page-title:before {
  right: 100%;
  margin-right: 10px;
}
.page-title:after {
  left: 100%;
  margin-left: 10px;
}

注意：我没有像你的例子一样使用渐变，这只是一个简单的例子，向您展示如何使用单个div完成。您需要调整CSS以适应。

Answer 2

我指的是Site1 Site2

在position: sticky;，z-index: 10;和hr标记的帮助下，我编写了以下示例，

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
/* https://css-tricks.com/examples/GradientBorder/*/

hr.style-six {
padding: 0;
border: none;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
color: #333;
text-align: center;
    position: sticky;
    width: 100%;
    left: 50%;
    top: 50%;
}


.img{
    background: #fff url(https://upload.wikimedia.org/wikipedia/wikimania2014/thumb/e/e2/Ask-Logo-Small.jpg/250px-Ask-Logo-Small.jpg) no-repeat center;
    background-size: 25px 25px;
    height: 25px;
    width: 25px;
    position: sticky;
    left: 50%;
    top: 50%;
    z-index: 10;
}

.main{
    height: 50px;
    position: relative;
}
</style>
</head>
<body>
<div class="main">
  <div class="img"></div>
  <hr class="style-six"/>
</div>
</body>

＆＃13;

四处走动只有一个相同的伪元素

2 个答案: