设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › Web密训营 › 0 0 0 4 - 页面美化，添加高清背景！
1234
返回列表 发新帖
楼主: 不二如是

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

[复制链接]
dys376820508
发表于 2018-7-15 20:42:11 | 显示全部楼层
C:\Users\dys\Desktop\微信截图_20180715203403.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

iVi
发表于 2018-7-19 23:22:30 | 显示全部楼层
好贵 没鱼币
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

soulwyb
发表于 2018-10-10 23:51:11 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>

  4. <head>
  5.     <title>
  6.         XXX
  7.     </title>
  8.     <meta charset="utf-8">
  9.     <style type="text/css">
  10.         html {
  11.             height: 100%;
  12.             color: #FF0088;
  13.         }
  14.         
  15.         body {
  16.             background: url(background.jpg) center center;
  17.             background-size: cover;
  18.         }
  19.     </style>
  20. </head>

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

  30. </html>
复制代码


小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

jiamin_2010
发表于 2018-11-12 14:23:33 | 显示全部楼层
想问下宽度不够 怎么设置啊？？？？
1542003855(1).jpg
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

月牙儿
发表于 2019-2-7 17:13:41 | 显示全部楼层
窝又有问题了。。在这里提问能解答嘛？
添加背景图片的时候，用
background : url(***.jpg)
background-image : url(***.jpg)
都可以，但background-image不能加 center center，加完就变空白了。。请问这是为什么啊？
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

星海雪的钟爱
发表于 2019-2-20 14:55:47 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>第四节：页面美化</title>
  8.     <style>
  9.         /* *{
  10.             margin: 0;
  11.             padding: 0;
  12.         } */
  13.         html{
  14.             height: 100%;
  15.             color: #d81d1d;
  16.         }
  17.         /* body元素的heigt不能设置为100%，设置后，背景图会有重复
  18.          * 原因：浏览器似乎会给body加了一个margin:8，body元素的height实际会比html的高度值小
  19.          * 处理：方式1：清除margin值；使用*{margin:0}初始化
  20.          *      方式2：让body继承html的高度
  21.          */

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

  28.     </style>
  29. </head>
  30. <body>
  31.     <div>
  32.         <h1>我爱鱼C</h1>
  33.         <p>fishc.com.cn-让编程改变世界</p>
  34.         <a href="http://fishc.com.cn">传送门</a>
  35.     </div>
  36. </body>
  37. </html>
复制代码

页面美化

页面美化
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

星海雪的钟爱
发表于 2019-2-20 14:58:26 | 显示全部楼层
月牙儿 发表于 2019-2-7 17:13
窝又有问题了。。在这里提问能解答嘛？
添加背景图片的时候，用
background : url(***.jpg)

因为background-image只是用来设置背景图片的，加了除url（）以外的参数就会出错，导致页面显示不正确。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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

哦这样啊，蟹蟹里！
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

phszhuli
发表于 2019-3-12 11:47:41 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>欢迎来到HTML世界</title>
  6.         <style type="text/css">
  7.                 body{
  8.                         background: url(1.png)center center;
  9.                         background-size: cover;

  11.                 }
  12.                 html,body{
  13.                         height: 100%;
  14.                         color: #ffffff
  15.                 }
  16.         </style>
  17. </head>
  18. <body>
  19.         <div id="container">
  20. <h1>我爱鱼C</h1>
  21. <p>WWW.FishC.com - 让编程改变世界</p>
  22. <a >传送门</a>
  23. </div>
  24. </body>
  25. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

phszhuli
发表于 2019-3-12 14:06:16 | 显示全部楼层
jiamin_2010 发表于 2018-11-12 14:23
想问下宽度不够 怎么设置啊？？？？

在style加一句body{background-size: cover;}
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

萌·小杨
发表于 2019-5-26 18:45:11 | 显示全部楼层
  1. <!doctype html>
  2. <html>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title>看什么看</title>
  6.                 <style type="text/css">
  7.                         html {
  8.                                 height: 100%;
  9.                                 color: #00ff00;
  10.                         }
  11.                         body {
  12.                                 background: url("bg.jpg") center center;
  13.                                 background-size: cover;
  14.                         }
  15.                 </style>
  16.         </head>
  17.         <body>
  18.                 <div id="container">
  19.                         <h1>老子哎FishC</h1>
  20.                         <p>草泥马</p>
  21.                         <a href="http://fishc.com.cn">传送！</a>
  22.                 </div>
  23.         </body>
  24. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

muwan
发表于 2020-3-21 20:28:37 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>HTML学习</title>
  7.     <style type="text/css">
  8.     html,body {
  9.         height: 100%;
  10.         color: #ff0088;
  11.     }
  12.     body{
  13.         background: url("img/BingWallpaper-2019-10-10.jpg") center center;
  14.         background-size: cover;
  15.     }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div>
  20.         <h1>这是H1</h1>
  21.         <div>这是块 ilovefishc</div>
  22.         <p>这是段落说明 www.ilovefishc.com 让编程改变世界</p>
  23.         <a href="https://ilovefishc.com">传送门</a>
  24.     </div>
  25. </body>
  26. </html>
复制代码

页面

页面
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

酒醉三分醒
发表于 2020-4-17 09:31:11 | 显示全部楼层
CSS颜色表的白色应该是#FFFFFF 吧，我设置FFFFFF不会变白，#FFFFFF才会
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

huanghuiyv
发表于 2020-8-15 13:44:52 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>TEST! TEST!!</title>
  6.         <style type="text/css">

  8.             html {
  9.                 height: 100%;
  10.             }

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

  16.             h1 {
  17.                 color: pink;
  18.             }

  20.             p {
  21.                 color: honeydew;
  22.             }
  23.         </style>
  24.     </head>

  26.     <body>
  27.         <h1>我爱鱼C</h1>
  28.         <p>让编程改变世界!</p>
  29.         <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
  30.     </body>
  31. </html>
复制代码

Snipaste_2020-08-15_13-44-34.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

omg123460
发表于 2021-4-18 08:54:36 | 显示全部楼层
1546
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

myssyzgd
发表于 2024-6-6 17:04:11 | 显示全部楼层
“浏览器默认不会给予body高度属性。所以为了确保照片自适应屏幕显示，需要给body以及body的父级（html）设置height属性，使之充满全屏。”

这句话是什么意思呀大佬，我在程序里面删掉了这句话，然后图片向下移动了一点，确实显示的效果变得好了一点
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

1234
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-6-5 11:33

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表