爲什麼我的圖像沒有顯示角2/4 css？

我正在做我的角度網站的英雄形象，圖像沒有顯示出來。我不知道爲什麼爲什麼我的圖像沒有顯示角2/4 css？

我的HTML

<div class="hero-image"> 
    <div class="hero-text"> 
    <h1 style="font-size:50px">I am John Doe</h1> 
    <p>And I'm a Photographer</p> 
    <button>Hire me</button> 
    </div> 
</div>

我的CSS

.hero-image { 
    background-image: url("https://newsi.creativecow.com/i/879292/2.jpeg"); 
    height: 50%; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    position: relative; 
} 

.hero-text { 
    text-align: center; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: black; 
}

來源

2017-05-21 TexasState Han

哪裏有模板和CSS正在申報？樣式是內嵌爲'樣式「還是在'styleUrls'下引用？用這些參考顯示組件。 –

它是在styleurls下。 –

請使用然後顯示代碼。如果我把它放到我自己的組件中，它就可以工作。 –

屬性高度50％，將無法正常工作，除非在那裏第一次div標籤文本。在div中創建一個圖片標籤。

希望這有助於：

.hero-image { 
 
    background-image: url("https://newsi.creativecow.com/i/879292/2.jpeg"); 
 
    height: 500px; /* Change Accordingly */ 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    position: relative; 
 
} 
 

 
.hero-text { 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    color: white; 
 
}

<div class="hero-image"> 
 
    <div class="hero-text"> 
 
    <h1 style="font-size:50px">I am John Doe</h1> 
 
    <p>And I'm a Photographer</p> 
 
    <button>Hire me</button> 
 
    </div> 
 
</div>

你不能給高度％以上的情況。你應該繼承它。

來源

2017-05-21 06:05:20

你也可以在div裏面給圖像標籤來顯示圖像。如果你喜歡這個。 –

你真是太棒了。非常感謝你！！！ –

歡迎:) –

嗯，我不太清楚你想要做什麼後，但一種解決方案是寫你的div-class hero-image作爲絕對的位置，但對於這種情況下，我想參考將是身體，我不知道你是否想要解決方案，還有一件事是寫width: 100%;

摘要：

.hero-image { 
background-image: url("https://newsi.creativecow.com/i/879292/2.jpeg"); 
height: 100%; 
width: 100%; 
background-position: center; 
background-repeat: no-repeat; 
background-size: cover; 
position: absolute; 
}

來源

2017-05-21 06:06:49

我不得不改變從百分比到px的高度謝謝你tho –

爲什麼我的圖像沒有顯示角2/4 css？

回答

相關問題