背景

最新推荐文章于 2022-04-26 15:33:07 发布
最新推荐文章于 2022-04-26 15:33:07 发布
阅读量769 收藏
点赞数
分类专栏： CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lulu_jiang/article/details/42490603
版权 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        *{margin:0;padding:0;}

        /**************************** 背景基本属性 ***************************/
        /* background-color设置背景颜色 */
        /* background-image设置背景图片 */
        /* background-repeat设置背景图片展示方式 */
        /* background-attachment设置背景是固定还是滚动 */
        /* background-position设置背景图片位置 */
        /* background:<background-color> [,<background-image>] [,<background-repeat>] [,<background-attachment>] [,<background-position] */
        #background1>div{margin:10px;width:100px;height:100px;border:1px solid #ccc;display:inline-block;}
        #background1>div:nth-of-type(1){background-color:red;background-color:rgba(255,0,0,0.1);}
        #background1>div:nth-of-type(2){background-image:url(images/New_bg.png);}
        #background1>div:nth-of-type(3){background-image:url(images/New_bg.png);background-repeat:repeat-y;}
        #background1>div:nth-of-type(4){background-image:url(images/New_bg.png);background-repeat:no-repeat;background-attachment:fixed;}
        #background1>div:nth-of-type(5){background-image:url(images/New_bg.png);background-repeat:no-repeat;background-position:10% 10% 0 0;}
        #background1>div:nth-of-type(6){background-image:url(images/New_bg.png);background-repeat:no-repeat;background-position:50% 0;}
        #background1>div:nth-of-type(7){background-image:url(images/New_bg.png);background-repeat:no-repeat;background-position:100% 0;}
        #background1>div:nth-of-type(8){background-image:url(images/New_bg.png);background-repeat:no-repeat;background-position:100% 50%;}
        #background1>div:nth-of-type(9){background-image:url(images/New_bg.png);background-repeat:no-repeat;background-position:100% 100%;}
        #background1>div:nth-of-type(10){background-image:url(images/New_bg.png);background-repeat:no-repeat;background-position:50% 100%;}
        #background1>div:nth-of-type(11){background-image:url(images/New_bg.png);background-repeat:no-repeat;background-position:0 100%;}
        #background1>div:nth-of-type(12){background-image:url(images/New_bg.png);background-repeat:no-repeat;background-position:0 50%;}
        #background1>div:nth-of-type(13){background-image:url(images/New_bg.png);background-repeat:no-repeat;background-position:50% 50%;}
        
        /* background-origin:padding-box || border-box || content-box指定绘制背景图片的起点 */
        #background2>div{background:orange url(images/New_bg.png) no-repeat left top;margin:10px;padding:20px;width:100px;height:100px;border:1px solid #ccc;display:inline-block;border:20px dashed rgba(0,0,0,0.3);}
        /* 背景background-position起始点从边框内边缘(padding外边缘)开始 */
        #background2>div:nth-of-type(2){background-origin:padding-box;}
        /* 背景background-position起始点从边框外边缘开始 */
        #background2>div:nth-of-type(3){background-origin:border-box;}
        /* 背景background-position起始点从padding内边缘(content外边缘)开始 */
        #background2>div:nth-of-type(4){background-origin:content-box;}

        /* background-clip:padding-box || border-box || content-box指定背景图片裁剪区域 */
        #background3>div{background:orange url(images/bg.png) no-repeat left top;margin:10px;padding:20px;width:100px;height:100px;border:1px solid #ccc;display:inline-block;border:20px dashed rgba(0,0,0,0.3);}
        #background3>div:nth-of-type(2){background-clip:border-box;}
        #background3>div:nth-of-type(3){background-clip:padding-box;}
        #background3>div:nth-of-type(4){background-clip:content-box;}

        /* background-clip还有一个text属性，配合Webkit内核的私有属性text-fill-color:transparent可以制作背景图片填充的文本效果 */
        #background4{background:orange url(images/btn_stud_online.png);-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:#fff;font-weight:bold;font-size:40px;width:200px;}

        /* background-size：auto || <length> || <perentage> || cover || contain指定背景图片的尺寸 */
        #background5>div{border:1px solid #ccc;width:100px;height:150px;margin:10px;display:inline-block;}
        /* background-size:auto;背景图不会失真 */
        #background5>div:nth-of-type(1){background:url(images/New_bg.png) no-repeat;background-size:auto;}
        #background5>div:nth-of-type(2){background:url(images/New_bg.png) no-repeat;background-size:100px 100px;}
        #background5>div:nth-of-type(3){background:url(images/New_bg.png) no-repeat;background-size:10% 90%;}
        #background5>div:nth-of-type(4){background:url(images/New_bg.png) no-repeat;background-size:cover;}
        /* background-size:cover;background-position:center;配合常用来制作满屏背景效果，但需要图片尺寸足够大 */
        #background5>div:nth-of-type(5){background:url(images/New_bg.png) no-repeat;background-size:cover;background-position:center;}
        /* background-size:contain;可以使图片按照自己的宽高比填充 */
        #background5>div:nth-of-type(6){background:url(images/New_bg.png) no-repeat;background-size:contain;}

        /* 结合媒体检查，制作全屏背景 */
        body{background:#000 url(images/screen.jpg) center center fixed no-repeat;background-size:cover;}
        @media only all and (max-width:1024px) and (max-height:768px)
        {
            body{background-size: 1024px 768px;}
        }
        @media only all and (max-width:640px) and (max-height:480px)
        {
            body{background-size:640px 480px;}
        }

        /* 多背景 */
        #background6{background:url(images/btn_control_lock_unlocked.png) no-repeat left top,
                                url(images/btn_control_lock_unlocked_clicked.png) no-repeat right top,
                                url(images/btn_control_share_unshared.png) no-repeat left bottom,
                                url(images/btn_control_share_unshared_clicked.png) no-repeat right bottom,
                                url(images/popup_assets_bg.png) repeat left top;
                     background-origin:padding-box,padding-box,padding-box,padding-box,border-box;
                     background-clip:border-box;
                     width:100px;height:100px;border:10px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="background1">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="background2">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="background3">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="background4">背景图片<br />填充文本</div>
    <div id="background5">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="background6"></div>
</body>
</html>

lulu_jiang
关注
专栏目录
【linux】shell脚本中设置字体颜色，背景颜色详细攻略
景天科技苑
06-22 2万+
在编写Shell脚本时，我们经常需要在终端中以不同的颜色和样式显示文本，以增加可读性或突出重要信息。本文将介绍如何在Shell脚本中实现彩色显示，并提供相应的代码示例。 在Shell中，可以使用ANSI转义序列来控制终端的颜色和样式。ANSI转义序列是以"\e["开头的特殊字符序列，后面跟着一些参数，用于控制终端的显示效果。
H5背景音乐解决方案
热门推荐
Joyce的前端日常
02-22 2万+
前言 背景音乐播放 1 自动播放 1 微信问题 2 Safari问题 3 解决方案代码 2 点击播放 离开页面关闭音乐 缓存状态 1 客户端存储数据方法 2 示例 完整解决方案代码 1. 前言 很多H5的项目会用到背景音乐，虽然是很小的一个模块，但是有不少的坑。本文总结了背景音乐的常用情况的解决方案。 在进行下面内容之前，如果你并不了解Audio，可以参考之前的文章...
CSDN博客怎么修改皮肤背景
小糖同学的专栏
11-13 5237
1.首先到个人中心的管理博客中选择博客设置 如图：   2.右键你当前默认的皮肤，选择审查元素，如图，我把相应地皮肤对应的代码标出来了。 我当前选择的是技术黑板这个皮肤，加入你想换成别的皮肤，就将我圈出的checked="checked readonly剪切，粘贴到你想要的皮肤模板中的id的后面。最后再点击保存就OK了。  ...
hexo博客的背景设置
Faith的博客
07-25 1万+
主要有以下30种： 在右上角或者左上角实现fork me on github添加RSS添加动态背景实现点击出现桃心效果修改文章内链接文本样式修改文章底部的那个带#号的标签在每篇文章末尾统一添加“本文结束”标记修改作者头像并旋转博文压缩修改“代码块自定义样式侧边栏社交小图标设置主页文章添加阴影效果在网站底部加上访问量添加热度网站底部字数统计添加 README.md 文件设置网站的图标Favic
2018年 CSDN博客背景皮肤设置
奋斗的菜鸟博客
09-09 9630
登录CSDN后，点击“我的博客”，如右图所示，
javascript更换背景
dre的博客
03-17 1万+
使用JS更换背景图是遇到的问题。css的background的参数问题
vue 自定义 文字背景
唐僧的专栏
04-26 2282
功能背景：有一个标题； 内容变化估计有20+种 一般做法：切图也是团队中一部分的主张，切个几十个图也是可以的，但是呢 作为一名老司机，我想试试其他有 挑战的方式： 并且以及上车：随着内容的 变化 长度变化；最麻烦的就是 凭借图形的过程！ 实际上这个背景图是被 分割了好几个块的，有点类似 小时候玩过的 七巧板( 看来小时候 七巧板 没白玩哈哈哈)； 代码如下： 代码并未整理 大家撮合着看，看看思路就行 <template> <view ...
实用淡雅的PPT背景图片PPT学习教案.pptx
10-04
PPT背景图片设计与应用 PPT背景图片是指在PPT制作过程中使用的背景图片，旨在提高PPT的视觉效果和美观度。实用淡雅的PPT背景图片PPT学习教案.pptx提供了丰富的PPT背景图片资源，适用于各种专业课件的制作。 知识点...
C#，获取与设置Windows背景图片的源代码
最新发布
03-23
C#，获取与设置Windows背景图片的源代码。为了满足孩子们个性化桌面的需求。桌面背景 Windows 7包含了大量新的桌面背景，从壮丽景观到乡村风情。用户也可以自己添加喜欢的图片。Windows 7包含了大量新的桌面背景，从...
黑色粒子特效-科技风-js动画-网页背景动效-跟随鼠标移动背景效果-源码
09-30
很多博客背景的科技风粒子特效，html源码，可以F12全屏当作背景版也可以自己开发到页面里当作背景特效。黑色的粒子特效，使用canvas绘制，可以跟随鼠标的移动变换背景粒子，很有科技感
MDK5编程背景颜色黑色背景
11-07
MDK5编程背景颜色 黑色背景，防止眼疲劳
unity2021 webgl透明背景插件
10-11
unity2021 webgl透明背景插件
3步搞定CSDN中代码背景颜色的修改
一起学编程
08-18 788
1、进入内容管理，点击最下方的博客设置 2、修改
CSS textarea在火狐，IE下统一样式
66
08-06 3159
<br />在IE下，FF下统一样式且不显示滚动条<br />.d_taklArea{border:1px #c3c3c3 solid;overflow-x:auto;overflow-y:hidden;}<br /> <br /><textarea name="textarea" rows="10" cols="20" class="d_taklArea" style="width:193px;height:120px;">
使用選擇器在頁面中插入內容
66
07-28 3109
使用選擇器來插入文字 h2:before{content:'Hello';color:White;background-color:Orange;} h2.test:before{content:none;} 標題1 標題2 標題
CSS3中的變形處理
66
08-01 1401
CSS3中可利用tansform功能實現文字或圖像的縮放，傾斜，移動，旋轉這4類變形處理 1.縮放 使用scale方法，可分別指定元素水平，垂直方向縮放倍率 div{ width:300px; background-color:Yellow;
盒子阴影
66
01-07 1241
*{margin:0;padding:0;} /**************************** CSS3盒子阴影属性 ***************************/ /* box-shadow:none | [inset x-offset y-offset blur-radius spreed-radius color],[inset x-of
CSS3中的動畫功能
66
08-01 902
Transitions功能 將元素的某個屬性從一個屬性值在指定時間內平滑過渡到另一個屬性值來實現動畫功能 transition:property duration timing-function property：表示對哪個屬性進行平滑過渡 duration：表示在多長時間內完成屬性值的平滑 timing-function：表示通過什麽方法來進行平滑過渡
Java实现改变窗口背景颜色
本示例展示了如何在Java Swing中通过编程方式改变窗口的背景颜色。 在Java编程中，Swing库提供了一套丰富的组件和工具，用于创建图形用户界面（GUI）。在这个例子中，我们看到如何创建一个简单的窗口，并通过点击...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值