Question

我试图将各种数字放在一个分区或具有特定背景颜色的部分中！我不明白为什么下面的代码不起作用！请帮忙！

＆＃13;

<div style="algin:center;width:100%;height:auto;background-color:#212121">
	<figure class="snip1197">
		<figcaption>
		    <blockquote>Sometimes I think the surest sign that intelligent life exists elsewhere in the universe is that none of it has tried to contact us.</blockquote>
		    <div class="arrow"></div>
		</figcaption>
		<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample10.jpg" alt="sq-sample10"/>
	</figure>	
</div>

＆＃13;

Answer 1

我不确定你的意思，但你可以添加更多图片或你想要的东西。

* {
  color:white;
  algin:center;
  }
.test{
  algin:center;
  width:100%;
  height:auto;
  background-color:#212121;
  }
.arrow{
  float:left;
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  
  border-left: 10px solid green;
  }
.test2{
  algin:center;
  width:100%;
  height:auto;
  background-color:red;
  }

<div class="test">
	<figure class="snip1197">
            <figcaption>
                 <div class="arrow">
                 </div>
                 <blockquote>
                    Sometimes I think the surest sign that intelligent life exists elsewhere in the universe is that none of it has tried to contact us.
                 </blockquote>
            </figcaption>
	    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample10.jpg" alt="sq-sample10"/>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample10.jpg" alt="sq-sample10"/>
	</figure>	
</div>

<!-- or with a figcaption for every picture and multiple figures in one div -->

<div class="test2">
	<figure class="fig1">
            <figcaption>
                 <div class="arrow">
                 </div>
                 <blockquote>
                    Sometimes I think the surest sign that intelligent life exists elsewhere in the universe is that none of it has tried to contact us.
                 </blockquote>
            </figcaption>
	    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample10.jpg" alt="sq-sample10"/>
      </figure>
      <figure class="fig2">
      <figcaption>
                 <div class="arrow">
                 </div>
                 <blockquote>
                    Sometimes I think the surest sign that intelligent life exists elsewhere in the universe is that none of it has tried to contact us.
                 </blockquote>
            </figcaption>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample10.jpg" alt="sq-sample10"/>
	</figure>	
</div>

Answer 2

我猜您希望blend上的图片为background-color。您可以使用background-blend-mode。但是你需要在同一个元素上设置背景颜色和背景图像。

在下面的示例中，我在div

上使用了它们

请参阅代码段或＆gt;的 jsfiddle

<div style="text-align:center;width:100%;height:auto; background-color:#212121;background-blend-mode:multiply; background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample10.jpg'); height:500px; background-repeat:no-repeat; background-position:center 100px"> <figure class="snip1197"> <figcaption> <blockquote>Sometimes I think the surest sign that intelligent life exists elsewhere in the universe is that none of it has tried to contact us.</blockquote> <div class="arrow"></div> </figcaption> </figure> </div>

P.S。 1）align写错了（algin）且align:center也不存在

P.S。 2）上面的代码只是一个例子。你的问题缺乏对你想要达到的目标的正确解释

如何在分区或部分内有一个数字

2 个答案: