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

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › Web密训营 › 如何快速修改背景色 & 添加背景图
返回列表 发新帖
查看: 4006|回复: 10

[奇技淫巧] 如何快速修改背景色 & 添加背景图

[复制链接]
不二如是
发表于 2017-1-20 08:28:20 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
本帖最后由 不二如是 于 2020-3-17 19:11 编辑

在04，我们第一次利用body，URL加载本地图片。

25，我通过C3方式，加载图片。

现在可以分享一个，更简单的加载方式，先看下代码：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title>基本框架</title>
  5. </head>
  6. <body bgcolor="#F33" background="FishC.png">

  8. </body>
  9. </html>
复制代码

效果图：
Snip20170120_183.png


没错，直接在<body>标签，用bgcolor修改背景色，background加载背景图。

唯一的硬伤，就是结构很混乱！

慎用，仅作分享看～

最尬的地方，还是需要C3，来取消背景图的平铺：
  1.    body{
  2.                         background: url(FishC.png)center center;
  3.                         background-repeat:no-repeat        
  4.                 }
复制代码


所以还是建议使用<img>标签！！！

  1. <img src="">
复制代码



这位鱼油，如果喜欢本系列HTML帖子，请订阅 专辑&#9758;（传送门）（不喜欢更要订阅 ）

评分

参与人数 3荣誉 +5 鱼币 +5 贡献 +9 收起 理由
微末非末 + 5 + 5 + 3 感谢楼主无私奉献！
睦ちゃん她爹 + 3 感谢楼主无私奉献！
alltolove + 3 感谢楼主无私奉献！

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

alltolove
发表于 2017-1-20 09:00:46 | 显示全部楼层
这么点内容正好适合我理解
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
 楼主| 发表于 2017-1-20 09:19:24 | 显示全部楼层
alltolove 发表于 2017-1-20 09:00
这么点内容正好适合我理解

哈哈，前面的也很简单～

有不会的发帖或者留言，看到第一时间回复～
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 1 反对 0

使用道具 举报

n9vakin
发表于 2017-1-20 09:26:59 | 显示全部楼层
新手过来抚摸楼主
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
 楼主| 发表于 2017-1-20 09:32:33 | 显示全部楼层
n9vakin 发表于 2017-1-20 09:26
新手过来抚摸楼主

谢谢抚摸～

送一块小皂皂给你
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

shishunfu
发表于 2017-4-25 10:05:22 | 显示全部楼层

新手过来抚摸楼主
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

隨鈊乄鎍慾
发表于 2018-6-6 21:42:48 | 显示全部楼层

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title>基本框架</title>
  5.                 <style type="text/css">
  6.                         body{
  7.                                 background: url(fishc.png) center 0;
  8.                                 background-repeat:no-repeat;
  9.                         }
  10.                          
  11.                 </style>
  12. </head>
  13. <body>
  14.        
  15. </body>
  16. </html>
复制代码
20180606214019270.png
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

rock5442107
发表于 2018-6-9 14:48:06 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>Tips0</title>
  6.         <style type="text/css">
  7.         body{
  8.                 background:url(FishC.png) center 0;
  9.                 background-repeat:no-repeat;
  10.         }
  11.         </style>
  12. </head>
  13. <body bgcolor="#F33" background="FishC.png">
  14.         <!--已用CSS,快速加入背景圖就沒效果啦-->
  15. </body>
  16. </html>
复制代码


Tips0.jpg

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

  4. <head>
  5.     <title>基本框架</title>
  6.     <style>
  7.         body {
  8.             background: url(FishC.jpg) center 0;
  9.             background-repeat: no-repeat;
  10.         }
  11.     </style>
  12. </head>

  14. <body bgcolor="#F33" background="FishC.jpg">

  16. </body>

  18. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

huanghuiyv
发表于 2020-8-18 20:18:28 | 显示全部楼层
无条件支持楼主！
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

chen1203
发表于 2022-5-22 22:17:52 | 显示全部楼层
我怎么像小甲鱼那样可以设置多个可点击改变的body背景图！
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-4-25 05:36

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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