加入收藏 | 设为首页 | 会员中心 | 我要投稿 聊城站长网 (https://www.0635zz.com/)- 智能语音交互、行业智能、AI应用、云计算、5G!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

在CSS中景图片不平铺怎么设置操作,代码是什么

发布时间:2023-09-11 14:36:43 所属栏目:语言 来源:
导读:这篇文章主要介绍“在CSS中景图片不平铺怎么设置,代码是什么”的相关知识,下面会通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“在CSS中景图片不平铺怎么设置,代码是什么
这篇文章主要介绍“在CSS中景图片不平铺怎么设置,代码是什么”的相关知识,下面会通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“在CSS中景图片不平铺怎么设置,代码是什么”文章能帮助大家解决问题。
 
在css中,可以利用“background-repeat”属性让背景图片不平铺,该属性用于设置背景图片的平铺模式,只需要给元素添加“background-repeat:no-repeat;”样式,即可让背景图片不平铺显示。
 
在css中可以利用background-repeat属性设置背景图片不平铺,background-repeat 属性设置是否及如何重复背景图像。默认地,背景图像在水平和垂直方向上重复。background-repeat 属性定义了图像的平铺模式。
 
下面我们通过示例来看一下:
 
<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
    <meta charset="UTF-8">
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
    <title>Document</title>
 
    <style>
 
    body{
 
background-image: url(1118.02.png);
 
}</style>
 
</head>
 
<body>
 
</body>
 
</html>

添加不平铺样式之后:
 
<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
    <meta charset="UTF-8">
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
    <title>Document</title>
 
    <style>
 
    body{
 
background-image: url(1118.02.png);
 
background-repeat: no-repeat;
 
}</style>
 
</head>
 
<body>
 
</body>
 
</html>
 
 

(编辑:聊城站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章