0 0 0 4 - 页面美化，添加高清背景！,Web密训营,Web开发,鱼C论坛

dys376820508 发表于 2018-7-15 20:42:11

C:\Users\dys\Desktop\微信截图_20180715203403.png

iVi 发表于 2018-7-19 23:22:30

好贵没鱼币

soulwyb 发表于 2018-10-10 23:51:11

<!DOCTYPE html>
<html>

<head>
<title>
   XXX
</title>
<meta charset="utf-8">
<style type="text/css">
   html {
         height: 100%;
         color: #FF0088;
   }

   body {
         background: url(background.jpg) center center;
         background-size: cover;
   }
</style>
</head>

<body>
<div id="container">
   <h1>我爱鱼C</h1>
   <p>www.FishC.com - 让编程改变世界</p>
   <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
</div>
</body>

</html>

jiamin_2010 发表于 2018-11-12 14:23:33

想问下宽度不够怎么设置啊？？？？

月牙儿 发表于 2019-2-7 17:13:41

窝又有问题了。。在这里提问能解答嘛？
添加背景图片的时候，用
background : url(***.jpg)
background-image : url(***.jpg)
都可以，但background-image不能加 center center，加完就变空白了。。请问这是为什么啊？

星海雪的钟爱 发表于 2019-2-20 14:55:47

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>第四节：页面美化</title>
<style>
   /* *{
         margin: 0;
         padding: 0;
   } */
   html{
         height: 100%;
         color: #d81d1d;
   }
   /* body元素的heigt不能设置为100%，设置后，背景图会有重复
      * 原因：浏览器似乎会给body加了一个margin:8，body元素的height实际会比html的高度值小
      * 处理：方式1：清除margin值；使用*{margin:0}初始化
      *    方式2：让body继承html的高度
      */

   body{
         background: url("../images/bg.jpg") center center;
         background-size: cover;
   }

</style>
</head>
<body>
<div>
   <h1>我爱鱼C</h1>
   <p>fishc.com.cn-让编程改变世界</p>
   <a href="http://fishc.com.cn">传送门</a>
</div>
</body>
</html>

星海雪的钟爱 发表于 2019-2-20 14:58:26

月牙儿发表于 2019-2-7 17:13
窝又有问题了。。在这里提问能解答嘛？
添加背景图片的时候，用
background : url(***.jpg)

因为background-image只是用来设置背景图片的，加了除url（）以外的参数就会出错，导致页面显示不正确。

月牙儿 发表于 2019-2-26 22:48:23

星海雪的钟爱发表于 2019-2-20 14:58
因为background-image只是用来设置背景图片的，加了除url（）以外的参数就会出错，导致页面显示不正确。
...

哦这样啊，蟹蟹里！

phszhuli 发表于 2019-3-12 11:47:41

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到HTML世界</title>
<style type="text/css">
body{
background: url(1.png)center center;
background-size: cover;

}
html,body{
height: 100%;
color: #ffffff
}
</style>
</head>
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>WWW.FishC.com - 让编程改变世界</p>
<a >传送门</a>
</div>
</body>
</html>

phszhuli 发表于 2019-3-12 14:06:16

jiamin_2010 发表于 2018-11-12 14:23
想问下宽度不够怎么设置啊？？？？

在style加一句body{background-size: cover;}

萌·小杨 发表于 2019-5-26 18:45:11

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>看什么看</title>
<style type="text/css">
html {
height: 100%;
color: #00ff00;
}
body {
background: url("bg.jpg") center center;
background-size: cover;
}
</style>
</head>
<body>
<div id="container">
<h1>老子哎FishC</h1>
<p>草泥马</p>
<a href="http://fishc.com.cn">传送！</a>
</div>
</body>
</html>

muwan 发表于 2020-3-21 20:28:37

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML学习</title>
<style type="text/css">
html,body {
   height: 100%;
   color: #ff0088;
}
body{
   background: url("img/BingWallpaper-2019-10-10.jpg") center center;
   background-size: cover;
}
</style>
</head>
<body>
<div>
   <h1>这是H1</h1>
   <div>这是块 ilovefishc</div>
   <p>这是段落说明 www.ilovefishc.com 让编程改变世界</p>
   <a href="https://ilovefishc.com">传送门</a>
</div>
</body>
</html>

酒醉三分醒 发表于 2020-4-17 09:31:11

{:10_257:}CSS颜色表的白色应该是#FFFFFF 吧，我设置FFFFFF不会变白，#FFFFFF才会

huanghuiyv 发表于 2020-8-15 13:44:52

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>TEST! TEST!!</title>
   <style type="text/css">

         html {
            height: 100%;
         }

         body {
            background: url(https://steamcdn-a.akamaihd.net/steamcommunity/public/images/items/532110/5b512f23e387af896fdb1589d7f8ae854e731cbd.jpg);
         }

         h1 {
            color: pink;
         }

         p {
            color: honeydew;
         }
   </style>
</head>

<body>
   <h1>我爱鱼C</h1>
   <p>让编程改变世界!</p>
   <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
</body>
</html>

omg123460 发表于 2021-4-18 08:54:36

1546

页: 1 2 3 [4]

鱼C论坛's Archiver