关于background的一些用法

最新推荐文章于 2024-04-12 10:32:25 发布
最新推荐文章于 2024-04-12 10:32:25 发布
阅读量1.2k 收藏
点赞数
分类专栏： css 文章标签： background css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangjing0320/article/details/91968620
版权

1、在登陆页经常有张背景图片。

<body>
</body>
<style>
body {
  	background: url(http://static.ixuezhong.cn/uploadimg/admin/20190522/9e5f80182ca84201bcd6ac190743d004.png) center center / cover no-repeat fixed;
}
</style>

分开写：

background-image: url(http://static.ixuezhong.cn/uploadimg/admin/20190522/9e5f80182ca84201bcd6ac190743d004.png);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment:fixed; /**图片不跟随浏览器滑动而移动**/

结果：
在这里插入图片描述

街边吃垃圾
关注
专栏目录
background属性用法总结
xi_2130的博客
10-22 8062
background用于在一个背景中设置背景属性，像css其他属性一样，有两种表示方法 简写形式，如border：1px solid #ccc； 具体形式，如border-width：10px； 1、简写形式位置含义解释： 位置①：设置背景颜色（不设置则背景为透明） 位置②：设置背景图片（url） 位置③：设置背景平铺方式，不设置该属性，默认为repeat，背景图像将在垂直方向和水平方向重复。可能的
前端学习 -- Html&Css -- 背景
A08110123的博客
05-16 1484
background 在一个声明中设置所有的背景属性。background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。background-color 设置元素的背景颜色。background-image 设置元素的背景图像。background-position 设置背景图像的开始位置。background-repeat 设置是否及如何重复背景图像...
background的使用方法
热门推荐
linlinlinlinzi的博客
02-12 1万+
今天给大家分享的是background(背景)的五个属性,分别是background-color(背景颜色)、background-image(背景图片)、background-repeat(背景平铺)、background-position(背景位置)、background-attachment(背景固定);这五项在日常应用中用的比较多,兼容性也比较好,所以针对这五项分享一下.
background用法
mozhan的专栏
10-27 1005
background-color出现在前面。 　　background-image图片的位置。 　　background-repeat图片重复的形式。背景图片可以重复repeat（这就像建筑用的瓦片一样），repeat-x在x轴（左右）重复，repeat-y在y轴（上下）重复，no-repeat不重复只显示一个。 　　background-position可以使用top,center,bottom,left,right或任何可以看到的组合，比如above在上面。 　　可以为大部分html元素设
使用css的background:url设置背景图方法
09-25
在这个话题中，我们将深入探讨如何使用`background:url()`来设置背景图像，以及与之相关的其他背景属性。 首先，`background:url()`是一个用于插入背景图像的函数，它告诉浏览器在哪里找到图片并将其用作元素的背景...
CSS下背景属性background的使用方法
12-11
color(指定的颜色，和文本颜色的设置方法相同) 示例：  body {background-color: black;}  h1 {background-color: #00ff00;}  h2 {background-color: transparent;}  p {background-color: rgb(0,0,25
vue 内联样式style中的background用法说明
10-14
本篇文章将详细讲解如何在Vue组件中使用内联样式中的`background`属性。 一、背景图片（Background Image） 在Vue中，若需要为元素设置背景图片，通常会在模板内的`<div>`或其他元素上使用`:style`指令。以下是一...
background的使用
duanmingyue789的博客
06-11 260
将容器的高度固定（410px） 将轮播图改为背景显示 由于可能图片的高度不一定是410px 所以需要设置css3中的background-sizebackground-size的使用 -length ： background-size:100px 100px 将背景图片固定到什么大小 -percentage： background-size：90% 90% 以百分比的形式设置图片的大小
CSS背景(background)的基本用法
zhdd1234的专栏
03-05 1529
背景(background)是css中重要的的部分，也是需要知道的css的基础知识之一。这篇文章将会涉及css背景(background)的基本用法，包括诸如 background-attachment 等的属性，也会介绍有关背景(background)的常用技巧，以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。 css2 中的背景(backg
background的详细用法
qq_41918834的博客
04-08 143
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。（也可以用2中的100%代替）repeat 默认，背景图像将在垂直方向和水平方向重复。如果只设置一个值，则第二个值会被设置为 “auto”。如果只设置一个值，则第二个值会被设置为 “auto”。把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。（可能导致背景图像的某些部分无法显示在背景定位区域中）repeat-x 背景图像将在水平方向重复。repeat-y 背景图像将在垂直方向重复。背景图像的宽度和高度（百分比）背景图像的高度和宽度（数字）
CSS中的background用法探讨
longnight121的博客
07-23 514
CSS中与background相关的属性有9个，他们的描述分别如下 属性 描述 CSS background 通过该属性可以指定以下所有属性 1 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 1 background-color 设置元素的背景颜色。 1 backgroun
背景图片background
WYY19901103的专栏
12-01 1516
background背景属性有： background-color 设置颜色作为对象背景颜色 background-image 设置图片作为背景图片 background-repeat 设置背景平铺重复方向 background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。 background-position 设置或检索对象的背景图像位置。 背景
CSS3-background的基本用法
Marvel__Dead 胡艺宝的博客
12-24 1433
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> *{margin:0px;padding: 0px;} .box-top{width: 50%;height: 400px;background-color: #ccc;margin: 1% auto;background-image: url(1.jpg) ;b
php background,CSS中background什么意思？background用法详解
weixin_35348268的博客
03-10 230
在css中，background是一个比较常用的样式，但是很多人不知道background怎么用，下面我们来讲解一下cssbackground属性怎么用。一：CSS中background什么意思？background属性是在一个声明中，可以设置所有的背景颜色，主要有五个背景颜色，一般我们在使用这个属性的时候，不去单独使用，因为background属性在旧版本的浏览器中，也是可以使用的。二：back...
CSS教程:背景background属性应用
weixin_34044273的博客
03-30 89
背景 background 　　css 说明 　　background-image:url("图片的网址"); 背景图 　　background: url(" 图片的网址 "); 背景 　　background-color:#色码; 背景色彩 　　Exp: 　　background-image:url(背景图案.jpg,gif,bmp); 　...
前端零基础入门（八）：background的妙用_css精灵
柒钥的博客
08-16 735
在前面我们已经了解到了网页当中背景的基本用法了，包括： 背景颜色，背景图片，背景图片是否重复，背景图片是否平铺等等基础样式。 今天要和大家讨论的是背景图的一个稍微高级一点的用法：图片精灵（也叫：雪碧图，css精灵）。先来看一些大网站： 这是淘宝，在这个地方就用到了雪碧图，再来看看这张图片是什么样子的 再来一个：百度 来看看这张背景图片： 虽然我不太理解作为百度，居然会把...
background详解
最新发布
时光清浅处，一步一安然
04-12 1759
background是 CSS 中的一个复合属性，用于设置元素的背景样式，包括颜色、图像、位置、大小、重复方式等。它可以简化为单独的背景属性，也可以一次性设置多个背景属性值。以下是background。
background使用方法
05-27
在 HTML 中，你可以使用 CSS 的 `background` 属性来设置元素的背景。这个属性可以设置多个值，包括背景颜色、背景图片和背景位置等。具体来说，你可以通过以下代码来设置元素的背景： ```css /* 设置元素的背景颜色 */ background-color: #ffffff; /* 设置元素的背景图片 */ background-image: url("your_background_image.jpg"); /* 设置背景图片的重复方式 */ background-repeat: no-repeat; /* 不重复 */ background-repeat: repeat-x; /* 水平重复 */ background-repeat: repeat-y; /* 垂直重复 */ background-repeat: repeat; /* 水平和垂直都重复 */ /* 设置背景图片的位置 */ background-position: center center; /* 居中 */ background-position: top left; /* 左上角 */ background-position: bottom right; /* 右下角 */ /* 设置背景图片的大小 */ background-size: cover; /* 覆盖整个元素 */ background-size: contain; /* 保持图片比例适应元素 */ background-size: 100% auto; /* 按比例缩放至宽度为100% */ /* 设置多个背景 */ background: #ffffff url("your_background_image.jpg") no-repeat center center / cover; ``` 注意，这些样式应该放在 CSS 文件中，或者在 `<style>` 标签中添加到 HTML 文件中。同时，需要注意不同浏览器对 `background` 属性的支持程度可能不同，所以最好对不同浏览器进行兼容性测试。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值