在backgroud-image之前的Css將不會顯示，僅在顯示內容時顯示，爲什麼？

我檢查過了，我的圖片加載沒問題。如果我把圖片網址放在內容中：「url（img/Funny.jpg）」，它沒有問題，只有當我把它放在背景圖片中時，它不會顯示，所以我試圖把z-index之前，它也失敗了。我試過PNG文件，也失敗了。我必須將它放到背景圖片而不是內容的唯一原因是我需要更改圖片大小。我無法更改內容圖片的大小。請幫助。在backgroud-image之前的Css將不會顯示，僅在顯示內容時顯示，爲什麼？

#front_body_button{ 
 
\t padding:9px; 
 
\t position:relative;  \t 
 
} 
 
#front_body_button #button { 
 
\t margin: 3px; 
 
\t -moz-border-radius:3px; 
 
\t -webkit-border-radius:3px; 
 
\t border-radius:3px; 
 
\t display:inline-block; 
 
\t cursor:pointer; 
 
\t color:#ffffff; 
 
\t font-weight:bold; 
 
\t text-decoration:none; 
 
\t font-size: 19px; 
 
     padding: 12px 18px; 
 
\t width: 119px; 
 
    \t background-color:#de614f; \t 
 
} 
 
#front_body_button #button:before{ 
 
\t background-image:url(img/Funny.jpg); 
 
\t background-size: 10px 20px; 
 
\t width: 10px; 
 
\t height: 20px; 
 
     content:""; 
 
     z-index:9999 !important; 
 
}

來源

2015-10-05 conan

這是由設計。在這裏閱讀：http：//www.w3.org/TR/css3-content/ tl; dr - 僞元素用於插入* content *，因此需要一些內容。 – TylerH

@TylerH這是不正確的。內容不是必需的。聰明的頭腦用這些新的僞元素做了許多聰明的事情。例如看看clearfix。 – Obsidian

@Obsidian雖然我誤解了這個問題，但你並不正確;如果沒有聲明'content：'屬性，':: before'和':: after'僞元素將不會呈現。不過，我可以看到你怎麼會誤解我的原創評論。 – TylerH

::before元件不阻擋水平。

添加display:block使高度和寬度可行。

#front_body_button{ 
 
    padding:9px; 
 
    position:relative; 
 

 
} 
 
#front_body_button #button { 
 
    margin: 3px; 
 
    -moz-border-radius:3px; 
 
    -webkit-border-radius:3px; 
 
    border-radius:3px; 
 
    display:inline-block; 
 
    cursor:pointer; 
 
    color:#ffffff; 
 
    font-weight:bold; 
 
    text-decoration:none; 
 
    font-size: 19px; 
 
    padding: 12px 18px; 
 
    width: 119px; 
 
    background-color:#de614f; \t 
 
} 
 

 
#front_body_button #button:before{ 
 
    background-image:url(http://mydario.co.uk/wp-content/uploads/sites/13/2014/11/help-dog-picture.jpg); 
 
    background-size: 10px 20px; 
 
    width: 10px; 
 
    height: 20px; 
 
    content:""; 
 
    z-index:9999 !important; 
 
    display:block; 
 
}

<div id="front_body_button"> 
 
    <div id="button"></div> 
 
</div>

來源

2015-10-05 16:02:28 Obsidian

非常感謝 – conan

在backgroud-image之前的Css將不會顯示，僅在顯示內容時顯示，爲什麼？

回答

相關問題