Question

我正在处理部分内容。在这里，我只想在两个部分中间的文本上使用一个跨度。两个部分的文本中心将同时具有白色和块状颜色。根据我的代码，我采用了两个不同的部分，并使用了文本渐变色。但我不希望使用jquery有任何可能性。谁能帮我？

.wrapper img {
	width: 100%;
	position: relative;
	
}
.section {
    position: absolute;
    top: 20%;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 1200px;
    box-shadow: 9px 7px 30px 0px rgba(0,0,0,0.75);

}
.ad-image {
	width: 100%;
	height: 700px;
	background-image: url('https://preview.ibb.co/e8NhxK/ad.jpg');
    background-repeat: no-repeat;
    background-position: center;
	background-size: cover;	
}
.ad-image-content h2 {
	position: absolute;
    top: 198px;
    right: 32px;
    font-size: 42px;
    font-weight: 500;
	color: #fff;
}
.ad-portfolio {
	background-color: #ffffff;
}
.ad-portfolio .menu ul {
	display: flex;
	justify-content: flex-end;
	list-style-type: none;
	color: #808080;
}
.ad-portfolio .menu ul li {
	margin: 5px 10px;
	font-family: 'Ubuntu', sans-serif;
	font-size: 18px;
	font-weight: 500;
}
.ad-content {
    width: 139%;
    position: absolute;
    left: 6%;
    top: 28%;
    color: #000;

}
.ad-content h3 {
    font-size: 14px;
    letter-spacing: 5px;
}
.ad-content span,
.ad-content h2 {
     font-size: 42px;
    font-weight: 500;
	text-indent: 2px;
}
.ad-content span {
    position: absolute;
    left: -45px;
    top: -4px;
	font-size: 42px;
	background: linear-gradient(to right, #ffffff 46%, #000000 47%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ad-count {
    position: absolute;
    top: 50%;
    right: 4%;
}
span.read {
	display: block;
    position: absolute;
    top: 90%;
    left: 35%;
    font-size: 24px;
    font-weight: 500;
    color: #6f6f6f;
}
span.read:after {
	content: '';
	position: absolute;
	left: -240%;
	top: 55%;
	width: 0;
	height: 3px;
	transition: .5s all linear;
}
span.read:hover::after {
	left: -240%;
	width: 280px;
	height: 1px;
	background-color: #1F1F1F;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="wrapper container-fuild">
	<div class="container section">
		<div class="row">
			<div class="col-md-7 ad-image">
				<div class="ad-image-block">
				</div>
				<div class="ad-image-content">
					<h2>White</h2>
				</div>
			</div>
			<div class="col-md-5 ad-portfolio">
				<div class="menu">
					<ul>
						<li>Home</li>
						<li>Stories</li>
						<li>Publications</li>
						<li>Contact Us</li>
					</ul>
				</div>
				<div class="ad-content">
					<span>&</span>
					<h2>Black</h2>
				</div>
				<div class="ad-count">
					<span>01</span>
					<hr>
					<span>07</span>
				</div>
				<span class="read">Read more</span>
				
			</div>
		</div>
	</div>
</div>

Answer 1

通过使用具有较高z索引和一些文本缩进的单个CSS伪元素，您可以轻松地用两种颜色设置单个文本跨文本的样式。

.bw {
  position: relative;
  font-size: 30px;
  background: #ccc;
  font-family: 'Ubuntu', sans-serif;
  color: #fff;
}

.bw:after { 
  content: "& Black";
  display: inline;
  position: absolute;
  top: 0;
  right: 0;
  color: black;
  z-index: 1;
  overflow: hidden;
  text-indent: -0.3em;
}

<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<span class="bw">White &amp; Black</span>

跨度文字颜色黑白

1 个答案: