0 0 0 4 - 页面美化，添加高清背景！

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

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([img]https://steamcdn-a.akamaihd.net/steamcommunity/public/images/items/532110/5b512f23e387af896fdb1589d7f8ae854e731cbd.jpg[/img]);
            }

            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

myssyzgd · 发表于 2024-6-6 17:04:11

“浏览器默认不会给予body高度属性。所以为了确保照片自适应屏幕显示，需要给body以及body的父级（html）设置height属性，使之充满全屏。”

这句话是什么意思呀大佬，我在程序里面删掉了这句话，然后图片向下移动了一点，确实显示的效果变得好了一点

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 0 4 - 页面美化，添加高清背景！