背景图的使用

已于 2022-01-21 19:39:42 修改
阅读量192 收藏 1
点赞数
分类专栏： css 文章标签： css
于 2022-01-15 09:03:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51610980/article/details/122441403
版权

背景图

怎样插入背景图

方式： background-image: url(背景图地址);

相关属性

属性描述
background-repeat设置或检索对象的背景图像如何铺排填充
background-attachment设置或检索对象的背景图像是随对象内容滚动还是固定的
background-position设置或检索对象的背景图像位置
background-origin设置或检索对象的背景图像显示的原点
background-clip检索或设置对象的背景向外裁剪的区域
background-size检索或设置对象的背景图像的尺寸大小

1.背景重复background-repeat

属性描述
repeat-x背景图像在横向上平铺
repeat-y背景图像在纵向上平铺
repeat背景图像在横向和纵向平铺
no-repeat背景图像不平铺
round背景图像自动缩放直到适应且填充满整个容器。
space背景图像以相同的间距平铺且填充满整个容器或某个方向。

例子：

<!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>
    <link rel="stylesheet" href="">
</head>
<style>
    body{
        height: 200px;
        width:400px;
        background-image: url(./img/man.png);
        background-repeat: repeat;
    }
</style>
<body>


</div>
</html>

效果图如下所示：

1) 默认情况下（repeat）

在这里插入图片描述

2) 不平铺 （no-repeat）

在这里插入图片描述

3) 横向上平铺 （repeat-x）

在这里插入图片描述

4) 纵向上平铺 （repeat-y）

在这里插入图片描述

5) 适应填充（round）

在这里插入图片描述

6）平铺填充（space）

在这里插入图片描述

2.位置是否固定background-attachment

属性描述
fixed背景图像相对于窗体固定
scroll背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动
local背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容

例子：

<!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>
    <link rel="stylesheet" href="">
</head>
<style>
    div{
        height: 200px;
        width:200px;
        background-image: url(./img/man.png);
        overflow:scroll;
        background-attachment:local;
    }
    body{
        height: 1000px;
    }
</style>
<body>
    <div>
        加油加油加油加油加油加油加油加油加油加油加油加油
        加油加油加油加油加油加油加油加油加油加油加油加油
        加油加油加油加油加油加油加油加油加油加油加油加油
        加油加油加油加油加油加油加油加油加油加油加油加油
        加油加油加油加油加油加油加油加油加油加油加油加油
        加油加油加油加油加油加油加油加油加油加油加油加油
        加油加油加油加油加油加油加油加油加油加油加油加油
        加油加油加油加油加油加油加油加油加油加油加油加油
        加油加油加油加油加油加油加油加油加油加油加油加油
        加油加油加油加油加油加油加油加油加油加油加油加油
        加油加油加油加油加油加油加油加油加油加油加油加油
        加油加油加油加油加油加油加油加油加油加油加油加油
        加油加油加油加油加油加油加油加油加油加油加油加油
        加油加油加油加油加油加油加油加油加油加油加油加油
        加油加油加油加油加油加油加油加油加油加油加油加油
        加油加油加油加油加油加油加油加油加油加油加油加油
        加油加油加油加油加油加油加油加油加油加油加油加油
        加油加油加油加油加油加油加油加油加油加油加油加油
    </div>

</div>
</html>

效果图如下：

1) 默认情况下（scroll）

在这里插入图片描述
由观察可知，随着div内容的滚动，背景图并没有发生滚动。
在这里插入图片描述

2）固定（fixed）

在这里插入图片描述
在这里插入图片描述

3）相对元素内容固定（local）

在这里插入图片描述
在这里插入图片描述

3.位置background-position

属性描述
用百分比指定背景图像填充的位置。可以为负值。其参考的尺寸为容器大小减去背景图片大小
用长度值指定背景图像填充的位置。可以为负值。
center背景图像横向和纵向居中。
left背景图像在横向上填充从左边开始。
right背景图像在横向上填充从右边开始。
top背景图像在纵向上填充从顶部开始。
bottom背景图像在纵向上填充从底部开始。

例子如下：

<!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>
    <link rel="stylesheet" href="">
</head>
<style>
    div{
        height: 200px;
        width:200px;
        background-image: url(./img/man.png);
        border: 10px solid black;
        background-position:top;
    }
    body{
        height: 1000px;
    }
</style>
<body>
    <div>
        
    </div>

</div>
</html>

1.center
在这里插入图片描述
2.left
在这里插入图片描述
3.right
在这里插入图片描述
4.bottom
在这里插入图片描述
5.top
在这里插入图片描述

4.开始显示的位置background-origin

属性描述
padding-box从padding区域（含padding）开始显示背景图像。
border-box从border区域（含border）开始显示背景图像。
content-box从content区域开始显示背景图像。

例子如下：

<!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>
    <link rel="stylesheet" href="">
</head>
<style>
    div{
        height: 200px;
        width:200px;
        background-image: url(./img/man.png);
        border: 10px solid black;
        background-origin:content-box;
    }
    body{
        height: 1000px;
    }
</style>
<body>
    <div>
        
    </div>

</div>
</html>

1.padding-box
在这里插入图片描述
2.border-box
在这里插入图片描述
3.content-box
在这里插入图片描述

5.背景图的大小background-size

属性描述
用长度值指定背景图像大小。不允许负值。
用百分比指定背景图像大小。不允许负值。
auto背景图像的真实大小。
cover将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

例子：

<!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>
    <link rel="stylesheet" href="">
</head>
<style>
    div{
        height: 200px;
        width:200px;
        background-image: url(./img/man.png);
        border: 10px solid black;
        background-size: auto;
    }
    body{
        height: 1000px;
    }
</style>
<body>
    <div>
        
    </div>

</div>
</html>

1.contain
在这里插入图片描述
2.cover
在这里插入图片描述
3.auto
在这里插入图片描述

醉挽清欢
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
python如何使用图片做背景,在python中添加背景图片
weixin_29611573的博客
11-21 6644
I'm trying to add a background image to a canvas in Python. So far the code looks like this:from Tkinter import *from PIL import ImageTk,Image... other stuffsroot=Tk()canvasWidth=600canvasHeight=400se...
java添加背景图片_Java怎么添加背景图片
weixin_42491590的博客
02-20 4873
首先，导入相关的包：import java.awt.BorderLayout;import java.awt.Container;import javax.swing.ImageIcon;import javax.swing.JFrame;import javax.swing.JLabel;import javax.swing.JPanel;也可以用：import java.awt.*；impor...
uniapp 背景图片使用踩坑记录
mitaoxia的博客
12-17 2616
uniapp 背景图片使用踩坑记录设置uniapp背景图（动态gif） 设置uniapp背景图（动态gif） 可以通过设置view的background或者background-image属性来实现： 代码就不贴了，需要注意的是，他的背景图片会有大小的限制，具体限制规则如下： 1.背景图不支持本地图片，请使用 base64 或网络资源。 2.40k大小以内的图片作为背景图，uni会自动转换为bas...
css基础知识 vue中图片背景图使用路径问题
qq_42860495的博客
07-24 2426
1、组件中引用图片 <img src="../assets/img/img-1.png" alt=""> 2、app.vue中在引入背景图片 body{background:url('../static/img/img-1.png')} 3、行间样式引入背景图片 <div style="background-image:url('static/img/img-1.png')"...
背景图属性
weixin_41534129的博客
03-01 2771
.引入背景图片:background-image:url(); png支持背景透明，jpg不支持背景透明。 设置背景图片大小：background-size 6.背景图片的显示原则 a.容器尺寸等于图片尺寸，背景图片正好显示在容器中； b.容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素； c.容器尺寸小于图片尺寸，只显示容器/元素/范围以内的背景图。 补充：网页上有两种图片形式：插入图片、背景图； 插入图片：属于网页内容，也就是结构。 背景图：属于网页的表现，背景图上可以显示文字、
uni-app 中使用背景图片
骑大马挎大刀
09-13 5835
一 : H5 上使用(但是在微信小程序中报错)1,使用网络图片(对不同环境需要不同配置)，2,或者 base64(需要本地转换)，uni-app 中使用背景图片。二 : 微信小程序中可以。
echarts设置背景图片
热门推荐
weixin_41554608的博客
08-20 1万+
echarts设置背景图片的两种方法 方法一 var img = new Image(); img.src = ’ 图片的url’ img.width = ‘100%’ img.height =‘100%’ 在option中引用： option = { backgroundcolor:{ image:img } } 方法二 在div中添加背景图片代码 <div id ="map" sty...
Vue 设置背景图片
小心仔的博客
09-09 2751
代码块 <template> <div class="app-container" :style="backgroundDiv" /> </template> <script> export default { data() { return { // 背景图片 backgroundDiv: { backgroundImage: 'url(' + require('@/assets/image/a..
css用网络图片做背景图片,网络编程css为图片设置背景图片
weixin_42347660的博客
08-03 2684
网络编程css为图片设置背景图片广告CSS的功能是非常强大的，对于元素的表现以及页面的布局，都提供了非常强大的功能，这主要在于我们灵活的运行，在这方面提供了丰富且富含价值的各种教程与信息。对于图片的使用，其实更多的是在内容层。根据WEB标准的思路，表现层的图片，已经都被分离到CSS中去了。只有作为内容的图片才能以IMG标签插入在页面中，这也是一直强调的语义。为图片设置背景图片，是一个非常搞的实例。...
Tableau 使用背景图像
qq_41081716的博客
10-10 3124
在您的视图中使用背景图像 - Tableau
适合程序员使用的桌面背景图
12-21
适合程序员使用的桌面背景图，需要的拿走
jquery动画背景图片
06-10
在这个例子中，我们将使用js调用图片作为网页背景图片。当然不仅仅是简单的静态图片，还可以让图片从左向右滚动起来，实现图片动画效果。例如让云彩从左向右飘动起来的效果
Vue项目中设置背景图片方法
01-21
在Vue项目开发中我们经常要向页面中添加背景图片，可是当我们在样式中添加了背景图片后，编译打包后，配置到服务器上时，由于路径解析的问题，图片并不能够正确的显示出来，如下CSS样式： background:url(../../...
css 背景图片平铺技巧
12-09
使用css来设置背景图片同传统的做法一样简单，但相对于传统控制方式，css提供了更多的可控选项，我们先来看看最基本的设置图片的方法。xhtml代码： 复制代码代码如下:”content”> </div> css代码： 复制代码代码...
导航条背景图
07-19
该资源与本人博客第二篇文章代码配合使用
CSS实现一个雨滴滑落效果
云加速
05-28 1265
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
css-垂直居中的几种写法
xxuxioxx的博客
05-27 353
垂直居中的几种写法
CSS 空间转换 动画
最新发布
qq_67140973的博客
05-31 287
空间转换、视距 - perspective、空间转换 - 旋转、立体呈现 - transform-style、空间转换 - 缩放、动画 - animation、动画的基本使用、animation 复合属性、animation 拆分属性、多组动画
CSS学习笔记：bootstrap的介绍、下载、使用及响应式布局的实现
lbcbjtlhmjq的博客
05-30 724
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的CSS 样式 bootstrap过时了吗？ 其实在学bootstrap这一部分的网课时，在弹幕上看到一些同学说bootstrap已经过时了，这里谈谈我的看法
设置网页背景图使用类选择器
04-20
好的，针对您的问题，可以使用以下代码来设置网页背景图使用类选择器： ``` .background { background-image: url("your-image-url"); background-position: center center; background-repeat: no-repeat; ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值