Home > Article > Web Front-end > The css setting background image and background color are not displayed_html/css_WEB-ITnose
The css setting background image and background color are not displayed_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:12:432343browse
Code in html Body:
171c8477c82d74a9b2eea84eaab93167
ee7959cc8dd4be16ef633321c03dac32Hospital Introduction5db79b134e9f6b82c0b36e0489ee08ed|
a114f3cb7ee4ca6ade224c7497213c54Hospital environment5db79b134e9f6b82c0b36e0489ee08ed|
ee7959cc8dd4be16ef633321c03dac32Beauty equipment5db79b134e9f6b82c0b36e0489ee08ed|
ee7959cc8dd4be16ef633321c03dac32Cultural activities 5db79b134e9f6b82c0b36e0489ee08ed|
> ee7959cc8dd4be16ef633321c03dac32Plastic Surgery Blog5db79b134e9f6b82c0b36e0489ee08ed|
ee7959cc8dd4be16ef633321c03dac32Contact Us5db79b134e9f6b82c0b36e0489ee08ed
16b28748ea4df4d9c2150843fecfba68f84a248a98172fa725a68bceb06dfe37
css code:
7c4180158942bea7ba461358c0275cd3
#footer{background-color:#17AEC9; height:3000px; text-align :center; width:980px; overflow:hidden;}
#footer a{color:#FFDDDF; margin:auto 10px;}
There are only these contents in the file, no other settings, background color Not displayed.
In addition, background:url(images/head_02.jpg) no-repeat;height:400px;width:980px;the background image is not displayed, the length and width of the div and the size of the image are set in other files same. Because other background image settings in the same file can be displayed, the file path should be correct.
Looking forward to your answers!
Reply to discussion (solution)
#footer{ background-color: #17AEC9; height:3000px; text-align:center; width:980px ; overflow:hidden;}
If you set the background color here, it will conflict with the background image. If you want to use an image, you cannot use the background color! Removed the background color!
I said the display is correct. . .
Try removing the comments
The css comment is
/* css comment syntax */
to: yingying901029
This code is just The background color is set, and the background image is set in another file.
After removing the comment or changing it to /* --- */, the background color displays normally, but I also wrote this in other files. Some background images can be displayed, and some cannot. This Why?
My background color is displayed here.
Follow the steps below to solve the problem:
2. The background color will not be displayed when there are pictures. Remove the color.
3. If the folder where your CSS is located is at the same level as the folder where the image is located; change the image path to background:url(../images/head_02.jpg) and refresh the test.
4. Check whether there is any interference from other CSS.
If you can’t find the problem anymore, create a new page and insert a background image to take a look.
I suggest that the poster take a look at all the involved files, so that you can’t see them one by one.
There is an images folder and Untitled-1.html, Untitled under the site. The files in -2.css, index.html and index.css, Untitled-1.html, Untitled-2.css are as follows:
@charset "utf-8";/* CSS Document */body{width:980px; margin:0 auto; font-family:"宋体";font-size:13px; line-height:18px;}a{text-decoration:none;}.aHover a:hover{color:#00A9B3;}.clear{clear:both;}.center{text-align:center;}img{border:0px;} ul{padding:0;}/*经典项目*/.best{background:url(images/best.jpg) no-repeat; width:262px; height:350px; padding-top:20px;}.best a{color:#626262;}.best ul{ height:20px; }.best ul li{float:left; width:130px; text-align:center;list-style:none; } like this The display is normal, but the background image cannot be displayed after I copy it to the index.html and index.css files respectively.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link rel="stylesheet" type="text/css" href="Untitled-2.css"/></head><body><!--经典项目--> <div class="best"> <ul style="margin-top:70px;"> <li><a href="#">数字2C无缝丰胸</a></li> <li><a href="#">鼻部综合整形</a></li> </ul> <ul style="margin-top:52px;"> <li><a href="#">美肤OPT王者风范</a></li> <li><a href="#">除皱 3+全效除皱</a></li> </ul> <ul style="margin-top:50px;"> <li><a href="#"> 韩式改脸型</a></li> <li><a href="#">眼部综合整形</a></li> </ul> <ul style="margin-top:58px;"> <li><a href="#">360度环状立体吸脂</a></li> <li><a href="#">专利微创瘦小腿</a></li> </ul> </div><!--class="best"--></body></html>
[/code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link rel="stylesheet" type="text/css" href="index.css"/></head><body> <img src="images/head_01.jpg" /> <div class="banner"><img src="images/banner.jpg" /></div> <!--flash新闻--> <div class="flash"> <div class="flashHead"> </div><!--class="flashHead"--> <div class="flashCont"> <img src="images/flashNews_04.jpg" /> </div><!--class="flashCont"--> <div class="flashBottom"> </div> </div> <!--经典项目--> <div class="best"> <ul style="margin-top:70px;"> <li><a href="#">数字2C无缝丰胸</a></li> <li><a href="#">鼻部综合整形</a></li> </ul> <ul style="margin-top:52px;"> <li><a href="#">美肤OPT王者风范</a></li> <li><a href="#">除皱 3+全效除皱</a></li> </ul> <ul style="margin-top:50px;"> <li><a href="#"> 韩式改脸型</a></li> <li><a href="#">眼部综合整形</a></li> </ul> <ul style="margin-top:58px;"> <li><a href="#">360度环状立体吸脂</a></li> <li><a href="#">专利微创瘦小腿</a></li> </ul> </div><!--class="best"--></body></html>[code=CSS]@charset "utf-8";/* CSS Document */body{width:980px; margin:0 auto; font-family:"宋体";font-size:13px; line-height:18px;}a{text-decoration:none;}.aHover a:hover{color:#00A9B3;}.clear{clear:both;}.center{text-align:center;}img{border:0px;} ul{padding:0;}/*flash新闻*/.flash{width:275px; height:350px; float:left;}.flashHead{background:url(images/flashNews_01.jpg) no-repeat; height:4px;}.flashCont{background:url(images/flashNews_08.jpg) repeat-y; height:auto; padding:3px;}.flashBottom{background:url(images/flashNews_09.jpg) no-repeat; height:5px;}.flashCont img{width: 266px; height:340px;}/*经典项目*/.best{background:url(images/best.jpg) no-repeat; width:262px; height:350px; padding-top:20px;}.best a{color:#626262;}.best ul{ height:20px; }.best ul li{float:left; width:130px; text-align:center;list-style:none; } I don’t know if the poster made the lowest mistake. According to the two parts you said, this is completely fine.
<style>#footer{background-color:#17AEC9; height:3000px; text-align:center; width:980px; overflow:hidden;}#footer a{color:#FFDDDF; margin:auto 10px;}</style><div id="footer"> <a href="#">医院介绍</a>| <a href="#">医院环境</a>| <a href="#">美容设备</a>| <a href="#">文化活动</a>| <a href="#">新闻动态</a>| <a href="#">专家介绍</a>| <a href="#">整形博客</a>| <a href="#">联系我们</a> </div> Can you only filter out the relevant parts of the code given by the poster, don’t list them all, it will make you dizzy. The code given behind is filtered, and the first two are not The problem is that the background images of the two latter ones are not displayed because there are other divs inside. There are also some problems with the arrangement. Could you experts please take a look at it.
I am also struggling with this issue~~