提问者:小点点

当我有一个图像时,我如何使用文本制作一个图像


这是我想要的结果的参考,我试着把这个放在css中

body{
    background:black;
}
p{
    color:#333;
    margin:0;
    padding:0;
    background:url('images.png') ;
    text-align:justify ;
    filter:grayscale(100%);
    background-position:center ;
    background-attachment:fixed;
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-background-fill-color:rgba(255, 255,255,255);
}

但它似乎不起作用这是我的输出&; 这就是图像


共2个答案

匿名用户

添加一个带有混合的额外背景层,并确保文本颜色是透明的。 然后,您可以轻松地控制混合模式和额外图层的透明度:

null

body {
  background: black;
}

p {
  margin: 0;
  padding: 0;
  line-height:1em;
  font-size:14px;
  background: 
    linear-gradient(rgba(0,0,0,1),rgba(0,0,0,1)),
    url('https://i.stack.imgur.com/TaaMS.jpg') center/cover;
  text-align: justify;
  background-attachment: fixed;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-background-fill-color: transaprent;
  color:transparent;
  background-blend-mode:color;
}
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia, nisi tincidunt accumsan vehicula, augue diam ullamcorper orci, ac hendrerit ex lorem eu ex. Morbi tempor rutrum eros, sit amet imperdiet ligula porta a. Vestibulum tristique sem
  eget ipsum vulputate dapibus. Vivamus a dui malesuada, posuere mi id, rhoncus purus. Nulla facilisi. Suspendisse euismod velit quis vehicula porttitor. Ut fringilla egestas erat ut gravida. Cras id lectus eget urna finibus tincidunt. Maecenas egestas,
  justo porttitor ornare tristique, velit neque pulvinar ligula, vitae feugiat risus magna consequat libero .</p>

匿名用户

你可以用这个网站生成你想要的输出。 他们主网页上的示例图像