【CSS】背景图套路一：用border-image做背景图

最新推荐文章于 2024-07-26 08:00:00 发布
最新推荐文章于 2024-07-26 08:00:00 发布
阅读量6.8k 收藏 3
点赞数 2
分类专栏： Web前端 文章标签： border-image 背景 图片优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LZGS_4/article/details/77540215
版权

未经允许，不得转载。


需求背景：如何用css来制作这样的一张优惠券？尤其是金棕色的齿轮部分：（设计稿宽高为690px * 210px）


我想到的最直接快速的方法就是用background的URL来设置：直接把下面整个图片作为元素的背景，搞定！(宽高为690px * 210px，注意四边有1px,#e6e6e6,6px的圆角描边)




最低0.47元/天 解锁文章
励志故事
关注
专栏目录
边框(规则的,不规则的)背景图border-image应用
qq_43944285的博客
04-17 406
CSS3 border-image 属性 1规则的边框背景图 <!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
边框给背景图css怎么写,使用css设置边框背景图片
weixin_35566895的博客
08-03 4741
使用css的特有属性，给不同的盒子添加边框图片。为什么会有这一场景呢。因为，UI给我们前端的边框图片可能未必适合我们当前的内容。这里我们主要使用到的属性有：border-image-sourceborder-image-sliceborder-top-widthborder-image-repeat个别属性可以根据自己的个人情况决定是否添加，希望使用的时候自己甄别。切边框图片的顺序:下面是我的代码...
css--边框 背景图
liItong的博客
04-02 227
1.background-image:url()-----------------------------------背景图片路径。--------------------------背景图位置。border-color:red---------------------------------边框的颜色（默认黑色）-------------------------------边框的宽度。conver:覆盖的意思，等比例放大这个图片，铺满这个盒子为止，容易出现裁剪效果。--------前两个必须有。
CSS实现图片边框酷炫效果
最新发布
流绪@微梦
07-26 1896
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
CSS-边框1-边框背景图
weixin_34297300的博客
08-12 557
1、边框背景概述 1.1 border-image-source border-image-source属性指定要使用的图像，而不是由border-style属性设置的边框样式。如果值是"none"，或者，如果无法显示图像，边框样式会被使用。 1.2 border-image-slice border-im...
html和css做个人介绍,有了这些CSS套路，你也可以做一个漂亮的简历
weixin_39550937的博客
06-20 2027
简历效果预览：简历原图预览 Resume预备知识HTML 基本标签CSS 基本知识DIV+CSS 布局知识套路：浮动与清除浮动块元素和内联元素的区别和用法工具的使用：阴影效果的制作一、结构分类头部导航条制作遮罩层制作头像、信息展示层自我介绍层制作技能进度条制作作品集制作说明：以上结构分类仅仅是个人分类方式，按照不同需求可以有不同的分类方式。二、头部导航条制作效果图 ：导航条分析：(1)头部导航条分...
前端基础知识总结---CSS篇
Web前端开发工程师
09-09 2358
本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！ 目录 1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？ 2.CSS 选择符有哪些？ 3.::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。 4.伪类与伪元素的区别 5.CSS 中哪些属性可以继承？ 6.CSS 优先级算法如何计算？ 7.关于伪类 LVHA 的解释? 8.CSS3 新增伪类有那些？ 9.如何居中 div？ 10.disp
【CSS】文档向学习笔记
burningalive的博客
04-30 1045
2015年时初学css时记的笔记
用VUE实现一个具有登陆、注册等功能的网站【详细步骤】
m0_67394230的博客
03-07 6410
用VUE实现一个具有登陆、注册等功能的网站【详细步骤】 用VUE实现一个具有登陆、注册等功能的网站【详细步骤】 一、主要功能 二、实现思路 1、页面设计 2、功能设计 3、重点和难点 三、代码实现 1、项目结构 2、页面布局——html部分（以登陆界面为例） 3、页面美化——css部分（以登陆界面为例） 4、功能设计 四、效果展示 1、登陆页面 2、注册页面 3、主页 五、总结 用VUE实现一个具有登陆、注册等功能的网站【详细步骤】 一、主要功能 本次任务主要是使用VUE
border和css的背景属性
责任与担当
05-04 1225
1:background-color:red; 2: 网页中图片的展示形式：img标签导入的图片 背景图（背景图不占据空间）; background-image: url(); 背景图默认显示状态： a:当背景图小于容器尺寸 ： 平铺; b:当背景图等于容器尺寸 ： 一张; c:当背景图大于容器尺寸 ： 只显示容器区域; ...
css3边框、阴影和背景图
sh2001824的博客
07-21 410
css3边框、阴影和背景图
border高度如何设置_CSS属性设置 -- 背景样式
weixin_36313743的博客
01-18 2921
Ⅰ background-color: -- 设置标签的背景颜色rgba(0,0,0,0.65); -- (红,緑,蓝三原色,透明度)只能给背景设置透明度opacity: 0.65; -- 改变整个标签的透明度 <style> .box1 {background-color: rgb(23,231,155)} .box2 {backgroun...
关于CSS中，引入背景图片和border的一点总结
子溪随笔
12-30 3684
1. CSS中，引入背景图片要使用url();方法，括号里面是图片的相对路径或者绝对路径。                                     2. 使用border属性时，不能只是设置border的宽度，而是要连样式一起设置。border属性的值一共有三个：宽度、样式、颜色，如果只是设置了宽度，那么边框是看不到的。例如：                  
CSS（三）盒子模型/背景/border/浮动
Joie_Z的博客
08-06 279
CSS（三） 盒子模型 W3C盒子模型，标准盒子模型，默认盒子模型，宽高设置的是内容区的宽高 内容区 宽=width 高=height 盒子 宽=内容区的宽+左右padding+左右border=width+paddingLeft+paddingRight+boderLeft+boderRight 高=内容区的高+上下padding+上下border=height+paddingTop+paddingBottom+borderTop+borderBottom 所占屏幕 宽=width+
【Web前端HTML5&CSS3】13-背景
VectorX's Blog
06-12 2045
背景 1. PS的基本设置 2. 背景 练习1：线性渐变效果的背景图 练习2：按钮点击效果
css边框图片的使用场景
m0_50441807的博客
07-30 912
border-image的第一个属性是图片地址，第二个属性是切的距离，第三个属性是边框的大小，第四个属性比较不常用，默认为0就好，第五个属性是选择填充还是拉伸；原理就是把这张图片切四刀，保证四个角的图片的比例不变，也就是四个角不会变形（1，3，6，8），然后2，4，5，7的位置拉伸或填充，这样无论盒子是多高多宽，都不会破坏图片四个角的比例；做大屏可视化的时候，往往会有一些边框的背景图片，但是由于可视化的盒子宽高是自适应的，也就是宽度和高度是不固定的；...
边框背景设置
cuizero
12-18 354
总共四步： 1.设置盒子border border: 30px solid palegoldenrod； 2.将背景框的图片引入 border-image-source:url('image/1.png') 3.设置图片分割的位置 border-image-slice：上 右 下 左； 4.设置图片边框的宽度 border-image-width：上 右 下 左； 5.设置照片平铺状态 border-image-repeat： stretch 拉伸图片以填充边框。 repeat 平铺图片以填充边框
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值