css渐变背景的文本

Question

我正在尝试用css实现这种效果：

所以，我有这个标记：

h2 {
    color:red;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+1,000000+100&1+44,0+100 */
background: -moz-linear-gradient(left, rgba(0,0,0,1) 1%, rgba(0,0,0,1) 44%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 1%,rgba(0,0,0,1) 44%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(0,0,0,1) 1%,rgba(0,0,0,1) 44%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */}

<h2>Cool is for people who don't accept themselves</h2>

我知道如何实现这一目标？

Answer 1

您可以使用linear-gradient(to right, black 60%, white 60%)

div {
  color: red;
  font-size: 25px;
  padding: 20px;
  width: 300px;
  border: 1px solid black;
  background: linear-gradient(to right, black 60%, white 60%);
}

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, at.</div>

或者您可以使用两个伪元素:before和:after

div {
  position: relative;
  border: 1px solid black;
  padding: 20px;
  color: red;
  font-size: 25px;
  width: 300px;
}
div:before, div:after {
  content: '';
  left: 0;
  top: 0;
  position: absolute;
  background: black;
  height: 100%;
  width: 60%;
  z-index: -1;
}
div:after {
  width: 100%;
  background: white;
  z-index: -2;
}

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, at.</div>