边框属性 background-position background-origin

最新推荐文章于 2024-11-01 12:26:05 发布
最新推荐文章于 2024-11-01 12:26:05 发布
阅读量75 收藏
点赞数
文章标签： css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qcsnssdn/article/details/131729436
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>

<style>
div{
    width: 794px;
    height: 1090px;
    padding: 30px;
    border: 20px groove rgba(202,227, 178, 0.6);
    background-image: url(./sc16.png),url(./sc17.png),url(./sc5.png),url(./sc18.png);
    background-repeat: no-repeat,no-repeat,repeat,repeat;
    background-position: left top,right bottom;
    /* background-clip: border-box,border-box,border-box; */
    background-origin:border-box,border-box,border-box ;
} 


    
</style>
<body>
    <div>
    </div> 
</body>
</html>

background-origin属性值：

padding-box 从padding开始定位

border-box 从边框线开始定位

content-box  从内容开始定位

运行结果：

 background-clip 有裁剪意思

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>

<style>
div{
    width: 794px;
    height: 1090px;
    padding: 30px;
    border: 20px groove rgba(202,227, 178, 0.6);
    background-image: url(./sc16.png),url(./sc17.png),url(./sc5.png),url(./sc18.png);
    background-repeat: no-repeat,no-repeat,repeat,repeat;
    background-position: left top,right bottom;
    background-clip: border-box,border-box,border-box;
    /* background-origin:border-box,border-box,border-box ; */
} 


    
</style>
<body>
    <div>
    </div> 
</body>
</html>

 运行结果：

background-position 属性设置背景图像的起始位置。 

background-position: left top,right bottom;

qcsnssdn
关注
css中background-origin属性的使用解析
12-02
`background-origin`与`background-position`属性结合使用，可以实现更精细的背景图像定位。但需要注意的是，如果元素的`background-attachment`属性被设置为`fixed`，`background-origin`属性将不再生效，因为固定...
CSS背景background、background-position使用详解
09-25
主要的背景属性包括`background-color`、`background-image`、`background-position`、`background-repeat`和`background-attachment`，这些属性可以通过合并使用缩写属性`background`来一次性设定。 1. **背景颜色...
详解background-position
热门推荐
祥哥的说
05-02 1万+
你真的了解background-positionbackground属性是CSS中最常见的属性之一，它是一个简写属性，其包含background-color、background-image、background-repeat、background-attachment、background-position、background-clip、background-origin和background...
background-clip,background-origin和background-position
Sapling
04-09 596
background-postion 规定背景图片的位置 px 第一值是x轴，第二个是y轴，默认是从左上角开始的，如果只设置第一个，第二个默认是auto 百分比，根据相对于父元素 top | center | bottom | left | center | right cover 把图像扩展至足够大，以使背景完全覆盖背景区域。背景图像的某些部分会无法显示(保持等比比例) co...
background-origin 与 background-position的关联
hzxOnlineOk的博客
01-25 793
background-origin是规定以哪以下3种中的某一种来定位背景图片，与box-sizing（border-box或者content-box）同理 padding-box背景图像相对于内边距框来定位。 border-box背景图像相对于边框盒来定位。 content-box背景图像相对于内容框来定位。 与 background-position的关联： background-...
background-color、background-image、background-attachment、background-position等属性详解
请叫我二狗哥
04-09 2496
background-color背景颜色 background-color背景颜色是包含边框border，边框如果不设置颜色，默认会采用文本颜色，而文本颜色默认是黑色。 background-image背景图片 background-image背景图片占据了元素的全部尺寸，包括内边距padding和边框border，但不包括外边距margin。默认背景图片位于元素的左上角，并且在水平和垂直方...
html 设置origin,background-origin属性怎么用
weixin_35698952的博客
06-24 643
CSS3background-origin属性作用：规定背景图片的定位区域。说明：设置或检索对象的背景图像计算时的参考原点(位置)。语法：background-origin:padding-box|border-box|content-box;padding-box：背景图像相对于内边距框来定位。border-box：背景图像相对于边框盒来定位。content-box：背景图像相对于内容框来定位。...
【CSS】background-origin作用是什么，怎么使用
读心悦
06-17 746
background-origin属性在CSS中用于设置背景图片的定位区域，即决定背景图片从哪里开始定位。通过上述属性和值的设置，你可以精确地控制背景图片在元素中的显示区域和定位起点。
CSS background-color、background-image、background-repeat、background-position、backgroundsize……
hangshao_123的博客
11-10 4033
以下代码均基于一个div盒子作介绍 1. background-color 作用：设置背景颜色 div { width: 200px; height: 200px; /* 1. 直接设置英文 */ /* background-color: pink; */ /* 2. 设置十六进制 */ /* background-color: #fff;
background-origin属性使用示例
Elna_99的博客
03-21 1675
background-origin用来决定background-position的参考原点，即背景图片定位的起点。取值有content-box,padding-box,padding-box三种。 content-box:背景图像相对于内容框来定位： .padding-box{     width: 314px;     height: 500px;     border: 1p
《CSS揭秘》灵活的背景定位 background-position
LobsterM的博客
07-29 351
难题 很多时候我们想针对容器的某个角对背景图片进行偏移定位，在css2.1中，我们只能指定对于左上角的偏移量，或者完全靠齐到其他三个角。如图，我们对背景图片设置 background-position：bottom right 效果展示： 因为图片跟容器的边缘之间没有空隙，不会在审美上产生非常舒服的效果。对于具有固定尺寸的容器来说，使用css 2.1来做到这一点是可能的，但是很麻烦，需要自己计算出基于自身尺寸以及我们期待他距离右下角的偏移量，计算出背景图片距离左上角的偏移量。借助现在的css特性我们有了更
CSS3教程：background-clip和background-origin
09-27
在CSS3中，`background-clip`和`background-origin`是两个重要的背景属性，它们用于控制元素背景的显示范围和定位基准。这两个属性是CSS3背景模块新增的功能，旨在提供更精细的背景图像控制。 首先，`background-...
名词（术语）了解--CSSOM (CSS Object Model)
weixin_40539956的博客
10-29 589
/ 1. 定义全局 CSS 变量// 2. 读取 CSS 变量// 3. 动态主题实现light: {},dark: {});
【前端基础】CSS进阶
qq_41413652的博客
11-01 777
目标：掌握复合选择器作用和写法；使用background属性添加背景效果。
第七章利用CSS和多媒体美化页面
2402_83227353的博客
10-29 868
用这个属性可以同时设置列表型属性（list一style-type），列表项图片属性（list-style-image）和列表项位置属性（list-style-position）。border-spacing 属性作用等同于标签属性 cellspacing，即当表格边框独立时（border-collapse 属性等于separate），相邻单元格边框之间的横向和纵向的间距。caption-side 属性设置或检索表格标题在表格的哪一边，此属性必须和表格的caption标签同时使用。
第八章 利用CSS制作导航菜单课后习题
最新发布
2302_80786141的博客
11-01 575
【代码】第八章 利用CSS制作导航菜单课后习题。
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 2073
【代码】炫酷的登录框!(附源码)
CSS浮雕效果
p_s_p的博客
10-30 251
【代码】CSS浮雕效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值