8.前端笔记-CSS-背景设置

已于 2022-11-26 11:12:55 修改
阅读量5.1k 收藏 16
点赞数 2
分类专栏： 前端-css 文章标签： css 前端 css3
于 2022-11-25 19:36:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ambition_ZM/article/details/128041226
版权

背景样式包括：背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

属性取值作用
background-color预定义颜色值\rgb\16进制背景颜色
background-imageurl(图片路径)背景图片
background-repeatrepeat/no-repeat/repeat-x/repeat-y是否平铺
background-positionx和y坐标赋值（方位名词或精确距离）背景位置
background-attachmentscroll\fixed背景附着（是否滚动）
复合背景写法background：各种背景设置属性写法更简单
背景色透明background:rgba(0,0,0,0.3).范围0-1背景色设置半透明

1、背景颜色

background-color:默认的颜色是透明的–transparent，也可以手动设置其他的背景颜色。

div{
	background-color:green;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            background-color: green;
        }
    </style>
</head>
<body>
    <div>background-color设置背景颜色</div>
</body>
</html>

在这里插入图片描述

2、背景图片

场景：设置logo或者一些装饰性图片。
设置背景图片和直接使用图片标签相比，有什么优点：
便于控制位置，背景图片可以铺满整个盒子
页面元素既可以添加背景颜色，也可以添加背景图片，只不过背景图片会亚洲背景颜色

div{
	background-image:none;//默认没有背景图片
	或设置背景图片
	background-image:url(图片路径)
}

注意：设置背景图片时，所在的容器需要有默认宽度和高度或是设置宽度和高度，不然图片会显示不出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: green;
            background-image:url(./1.jpg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述

3、背景平铺

background-repeat,取值有：
repeat（默认是平铺）,no-repeat（不平铺），repeat-x(横向平铺)，repeat-y(纵向平铺)

3.1 平铺的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: green;
            background-image:url(../html学习/images/logo.png);
            background-repeat: repeat;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述

3.2 不设置平铺的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: green;
            background-image:url(../html学习/images/logo.png);
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述

4、背景图片位置

banckground-position属性
x\y是表示x坐标和y坐标，可以使用方位名词或精确单位

background-position:x y;
参数值说明
length百分数/由浮点数和单位标识符组成的长度值
positiontop,center,bottom,left,right方位名词

4.1 参数是方位名词

  • 如果指定的两个值都是访问名词，则两个值的前后顺序无关，比如：left top和top left效果一致
  • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
    应用：
    王者荣耀网站的一个装饰图模仿、背景图模仿
    目标：在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3 {
            width: 118px;
            height: 40px;
            /* background-color: pink; */
            font-size: 14px;
            line-height:40px;
            font-weight: 400;
            text-indent: 2em;
            background-image: url(../html学习/images/title_sprite.png);
            background-repeat: no-repeat;
            background-position:-30px center;
            position: right;
        }
        body{
            background-image: url(../html学习/images/background.png);
            background-repeat: no-repeat;
            background-position: center 41px;
            background-attachment: fixed;
        }
        p{
            color: aliceblue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h3>成长守护平台</h3>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
</body>
</html>

在这里插入图片描述

4.2 参数是精确单位

  • 如果参数值是精确单位，第一个值必定是x，第二个是y
  • 如果只写了参数值，则写的这个一定是x，没写的默认是y垂直居中

4.3 参数是混合单位

  • 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

5、背景图像固定（背景附着）

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
场景：做视差滚动效果
background-attachment:scroll—背景图像随对象内容滚动**（默认）**
background-attachment:fixed–背景图像固定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3 {
            width: 118px;
            height: 40px;
            /* background-color: pink; */
            font-size: 14px;
            line-height:14px;
            font-weight: 400;
            text-indent: 2em;
            background-image: url(../html学习/images/title_sprite.png);
            background-repeat: no-repeat;
            background-position:-30px -6px;
            position: right;
        }
        body{
            background-image: url(../html学习/images/background.png);
            background-repeat: no-repeat;
            background-position: center 40px;
            background-attachment: fixed;
        }
        p{
            color: aliceblue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h3>成长守护平台</h3>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
    <p>abcd</p>
</body>
</html>

6、背景样式复合写法

属性值没有顺序要求，但一般习惯约定为：

background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
background: transparent url(image.png) repeat-y fixed top

7.背景颜色半透明-CSS3新增

最后一个参数是alpha透明度，取值范围在0-1之间
rgba的a
只是让盒子的背景色半透明，不影响盒子内容

background:rgba(0,0,0,0.3)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background: transparent url(../html学习/images/background.png) no-repeat fixed top;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: rgba(0,0,0,0.5);
        }
       
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述

综合练习：

实现一个可以切换背景图颜色的导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接背景导航栏</title>
    <style>
        .nav a{
            display: inline-block;
            width:120px;
            height: 58px;
            text-decoration: none;
            color: #fff;
            line-height: 50px;
            text-align: center;
        }
        .nav .bg1{
            background-image: url(../images/bg1.png);
        }
        .nav .bg1:hover{
            background-image: url(../images/bg11.png);
        }
        .nav .bg2{
            background-image: url(../images/bg2.png);
        }
        .nav .bg2:hover{
            background-image: url(../images/bg22.png);
        }
        .nav .bg3{
            background-image: url(../images/bg3.png);
        }
        .nav .bg3:hover{
            background-image: url(../images/bg3.jpg);
        }
        .nav .bg4{
            background-image: url(../images/bg4.png);
        }
        .nav .bg4:hover{
            background-image: url(../images/bg5.png);
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#" class="bg1">点击这里</a>
        <a href="#" class="bg2">点击这里</a>
        <a href="#" class="bg3">点击这里</a>
        <a href="#" class="bg4">点击这里</a>
    </div>
</body>
</html>

效果如下：
在这里插入图片描述
鼠标悬浮：
在这里插入图片描述

MY Daisy
关注
  • 2
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端网页设计、html+css+js、武汉旅游网页前端课程设计
08-04
该项目使用html+css+js实现网页的设计，一共包含五个网页：武汉景点介绍首页，武汉景点详情，武汉美食，黄鹤楼景点介绍详情，联系客服相关问题咨询页面。 下面主要介绍首页设计： 首页导航：导航部分主要介绍本网址的每个模块内容，用户可以点击跳转网页。 首页中部内容：中间部分内容主要介绍网站导航的九个板块内容，其中内容分板块详细介绍每一个功能模块的内容，使用户对本网站有一个大概的了解与一个良好的视觉效果，并且武汉简介中的文字能动态的更改颜色，使用户停留的时间更长。 首页中部设计：中部设计主要为九个板块，第一个为导航板块，其中左边放置网站logo剩下设置网站导航，其中前三个导航设计超链接，使用户点击能跳转到相应的网页，最后一个导航设计为下拉列表，用户点击时能跳转到目标网站。第二个板块为轮播图，该板块能按照设置的时间轮流播放武汉的风景图片。武汉简介、武汉美食板块设计为一段介绍文字与相应的图示照片，武汉历史设计为一段介绍武汉的历史与一段经典的视频，风景名胜、旅游指南、联系方式板块设计为三个表格，用户可以点击每一个表格项跳转到目标页面。 首页页脚：页脚主要说明本网址介绍的景点的地理位置与网址版权
前端——CSS：设置元素背景
Searchin_R的博客
09-23 2541
设置元素背景一共分为两类，一类是设置元素背景颜色，一类是设置元素背景图片。 1、设置元素背景颜色 元素背景颜色通过background-color属性为元素设置背景色。这个属性接受任何合法的颜色值。该属性可以为所有元素设置背景色，比如body，以及em这类行内元素。 background-color无法被继承，如果不设置颜色，它默认为transparent，即透明背景色。如果该元素有父元素，...
前端设置任何颜色作为主题色(不用预先指定固定几种)，吐血整理
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
12-21 1399
关注前端瓶子君，回复“交流”加入我们一起学习，天天进步授权转载自：寒水寺一禅https://segmentfault.com/a/1190000038436829项目中，本来要提供2个...
WEB前端网页设计-Bootstrap5 & Font
君逍遥o
04-30 524
WEB前端网页设计-Bootstrap5 & Font
前端项目review之修改element-ui全局主题颜色配置element-theme-chalk和gulp
楚楚梦厦的博客
04-22 4547
每个公司的主题风格肯定是不一样的，比如现在的公司主题就是#00ab7a。在PC端TO-B的项目中少不了用element-ui，这个时候用element-theme-chalk直接本地编译修改了element全局的主题色。 1. 全局安装element-theme npm install element-theme -g 2. 在vue中安装element-theme-chalk到dev生产环境 npm install element-theme-chalk -D 3. 初始化变量文件element-va
前端必知：9.背景的设置
qq_52799985的博客
07-09 1616
这些是常用的背景设置属性，可以用于定制网页的背景样式。你可以根据需求使用这些属性来创建各种各样的背景效果，包括颜色、图片、重复方式、位置、尺寸、滚动效果以及其他高级特性如模糊效果等。在前端开发中，背景的设置是一个重要的方面，可以通过 CSS 来实现。
前端学习日记3-如何设置网页背景图片
热门推荐
weixin_53089473的博客
03-03 1万+
法1: 在html页面body后直接设置 <body background="image/A.jpeg"></body> 法2: 在css文件中选择body进行设置背景 body{ background: url("image/A.jpeg") } 法3： 在head中设置css样式 <style> body{ background: url("image/A.jpeg") } </style> ...
前端——背景
u013430418的博客
07-11 2768
前端——背景笔记 用来复习 渐变色
CSS背景设置
wujianrenn的博客
10-30 9070
CSS背景属性：背景颜色设置，背景图片，背景平铺，背景图片位置，背景图片固定，背景样式合写，背景色半透明
前端必知：25.设置背景/以及背景蒙版（09进阶）
qq_52799985的博客
07-23 672
设置背景和背景蒙版是前端开发中常用的技巧，可以为网页和应用程序增加视觉上的吸引力和个性化。通过灵活地运用背景图片、渐变、背景蒙版等属性和效果，我们可以创造出独特且令人印象深刻的用户界面。然而，需要注意在使用背景蒙版时要注意平衡透明度和可读性，确保内容仍然易于阅读和使用。
HTML-CSS-JS:关于前端的一些技巧
08-04
HTML1-背景图片2-超级连接3-form表单14-form表单25-id属性6-列表7-div和span8-html笔记2. CSS1-CSS嵌入HTML的第一种方式2-CSS嵌入HTML的第二种方式3-CSS嵌入HTML的第三种方式4-CSS嵌入HTML的第三种方式(外部的.CSS...
css笔记整理_1.pdf
02-26
css笔记整理（精简） 初识CSS CSS语法 CSS样式引入 css选择器 CSS中的块级元素与行内元素 background 背景(集合样式) font 文字(集合样式) border 边框(复合样式，集合样式) CSS 框模型概述
HTML-网页多媒体设计期末作业.zip
12-31
参考项目文件和笔记：项目文件和笔记提供了丰富的背景信息和开发经验。在学习的过程中，不妨参考这些资料，以帮助你更好地理解和学习。 动手实践：网页设计是一门实践性很强的技能。通过实际操作，你可以更好地掌握...
2019-2020-2网页设计作业.zip
12-31
参考项目文件和笔记：项目文件和笔记提供了丰富的背景信息和开发经验。在学习的过程中，不妨参考这些资料，以帮助你更好地理解和学习。 动手实践：网页设计是一门实践性很强的技能。通过实际操作，你可以更好地掌握...
网页设计期末大作业-大鱼海棠(html+css+js).zip
12-31
参考项目文件和笔记：项目文件和笔记提供了丰富的背景信息和开发经验。在学习的过程中，不妨参考这些资料，以帮助你更好地理解和学习。 动手实践：网页设计是一门实践性很强的技能。通过实际操作，你可以更好地掌握...
CSS基础——1.CSS样式
weixin_66370632的博客
04-23 565
CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等。css的主要作用是定义网页的样式 CSS样式 1. 行内样式 行内样式：直接定义在 HTML 标签的 style 属性中
【CSS】grid 布局一行自动填充，每行最大限定px
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
04-23 133
【代码】【CSS】grid 布局一行自动填充，每行最大限定px。
基于 Flexbox 的纯 CSS 框架：兼容性好、文档丰富 | 开源日报 No.232
开源服务指南
04-23 185
想要快速搭建现代化的网页界面吗？不妨试试基于 Flexbox 技术的现代 CSS 框架 bulma 吧！bulma 提供快速安装方式，兼容性良好，不含 JavaScript 部分，让您的网页在主流浏览器上运行良好。丰富的文档和在线浏览功能，让您快速上手，让网页设计变得更加简单和高效。快来尝试 bulma，让您的网页设计更上一层楼！
HTML5+CSS3小实例：炫彩荧光线条登录框
最新发布
艾恩小灰灰的博客
04-23 267
实例：炫彩荧光线条登录框。技术栈：HTML+CSS。
vue3半透明悬浮框
08-25
要实现Vue3中的半透明悬浮框效果，可以按照以下步骤进行操作： 1. 首先，将悬浮窗组件和带有图片背景的组件放置在共同的父组件div上。这样可以实现悬浮窗的效果。 2. 接下来，需要将该父组件div设置为全屏大小，并设置背景颜色为黑色。通过设置透明度来实现背景的半透明效果。可以使用以下CSS样式来设置：#forPop { width: 100%; height: 100%; top:0px; left:0px; position:absolute; filter: Alpha(opacity=60); opacity:0.6; background:#000000; display:none; } 3. 当点击时，需要完成半透明效果和弹框的JavaScript实现。可以使用JavaScript代码来实现这一效果。 4. 在点击事件中，将原先设置为display:none的样式改为visibility: hidden，将原先设置为display: block的样式改为visibility: visible。这样就可以实现半透明效果和弹框的显示。 通过以上步骤，你可以在Vue3中实现半透明悬浮框效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [【Vue】悬浮窗和聚焦登录组件经验总结](https://blog.csdn.net/m0_59792745/article/details/127279667)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue.js和css结合实现弹框居中以及背景半透明](https://blog.csdn.net/nuannuanloveai/article/details/96251466)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值