2016-12-21 64 views
0

我想把各種數字放在一個部門或具有特定背景色的部分內!我不明白爲什麼下面的代碼不工作!請幫忙!如何在一個部門或部門內部有一個數字

<div style="algin:center;width:100%;height:auto;background-color:#212121"> 
 
\t <figure class="snip1197"> 
 
\t \t <figcaption> 
 
\t \t  <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> 
 
\t \t  <div class="arrow"></div> 
 
\t \t </figcaption> 
 
\t \t <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample10.jpg" alt="sq-sample10"/> 
 
\t </figure> \t 
 
</div>

+1

你是什麼意思不工作?你期望的結果是什麼,發生了什麼,而不是那個? – Kyle

回答

0

我不知道你的意思,但你可以添加一些圖片或你想要什麼。

* { 
 
    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"> 
 
\t <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> 
 
\t  <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"/> 
 
\t </figure> \t 
 
</div> 
 

 
<!-- or with a figcaption for every picture and multiple figures in one div --> 
 

 
<div class="test2"> 
 
\t <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> 
 
\t  <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"/> 
 
\t </figure> \t 
 
</div>

0

我猜你想在background-color的圖像blend。你可以使用background-blend-mode。但你需要在同一個元素上設置背景顏色和背景圖像。

在下面的示例中

我用他們在div

見代碼段或>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"> 
 
\t <figure class="snip1197"> 
 
\t \t <figcaption> 
 
\t \t  <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> 
 
\t \t  <div class="arrow"></div> 
 
\t \t </figcaption> 
 
\t \t 
 
\t </figure> \t 
 
</div>

P.S. 1)align寫錯了(algin)也align:center不存在

P.S. 2)上面的代碼只是一個例子。你的問題缺乏你想要達到的目標的正確解釋