首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    你可能不是那么了解的 CSS Background

    本文首发于政采云前端团队博客:你可能不是那么了解的 CSS Background https://www.zoo.team/article/css-background ?...background-position 指定背景图像的位置 0%, 0% CSS2.1 background-image 指定要使用的一个或多个背景图像 none CSS2.1 background-repeat...scroll CSS2.1 background-size 指定背景图片的大小 auto CSS3 background-origin 指定背景图像的定位区域 padding-box CSS3 background-clip...当然,层级最低的还是 background-color; 背景渐变 background-image: linear-gradient 背景渐变是基于 background-image 来设置的。...背景大小 background-size 感觉这个属性很常见吧,其实它也是 CSS3 中新加的属性。CSS2.1 中,背景图片大小是无法设置的。

    1.4K20

    CSS从基础到熟练学习笔记(三)CSS中的5种背景属性(背景颜色、背景图片、固定背景图片等)

    CSS背景属性用于定义元素的背景效果,常用的有5种背景属性:背景颜色、背景图片、背景图片重复展示的方式、背景附着的方式以及背景位置 background-color background-image background-repeat...background-attachment background-position 背景颜色background-color CSS中可以通过background-color属性指定元素的背景颜色,例如指定...body元素的背景颜色: body { background-color: lightblue; } 颜色的表示方式也有3中,具体可参见RGB颜色对照表以及详细介绍CSS中的三种颜色表示方式 背景图片...background-image CSS通过background-image属性指定元素的背景图片。.../20161118220122095"); } 背景图片显示方式background-repeat CSS通过background-repeat属性指定背景图片的展示方式。

    1.1K10

    巧妙实现带圆角的渐变边框

    border-image border-image 是 CSS 规范 CSS Backgrounds and Borders Module Level 3 (最新一版的关于 background 和 border...法一:background-image + 伪元素 第一种方法,我们不再使用 border-image ,而是使用 background-image + 伪元素 的方案,这也是在 border-image...利用 background-image 实现一个渐变背景,再通过叠加一个白色背景使之形成一个渐变边框。...background-image 被裁剪至内容区(content box)外沿 这里,我们使用设置两个 background-image,设置两个 background-clip ,并且将 border...更多精彩有趣的 CSS 效果,欢迎来这里看看 CSS 灵感 -- 在这里找到写 CSS 的灵感。 如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

    7K30

    CSS3 新特性

    # CSS3 新特性 结构性伪类选择器(重点) 内容追加伪元素(重点) CSS3新增样式属性 background-image的渐变 线性渐变(重点) CSS3的opacity 属性(重点) CSS3...的filter(滤镜) 属性 如同人类的的进化一样,CSS3是CSS2的“进化”版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷。...新增样式属性 # background-image的渐变 渐变配色推荐网站:https://webgradients.com/ (opens new window) # 线性渐变(重点) 语法 background-image...: linear-gradient(red, yellow, blue); } 其他线性渐变: #grad { background-image: linear-gradient(to bottom...right, red , yellow); } #grad { background-image: linear-gradient(to right, red , yellow); } <!

    53120

    H5C3第一节

    CSS3简介 如同人类的的进化一样,CSS3是CSS2的“进化”版本,在CSS2基础上,增强 或新增 了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷。...该值为空时,则对象的阴影类型为外阴影 CSS3背景 在css2中已经有background属性了,用于设置盒子的背景相关的一些样式,在CSS3中新增加了几个背景相关的几个属性。...//最简单的渐变 background-image: linear-gradient(red, green); //设定渐变的方向 background-image: linear-gradient(to...right, red, green); //也可以设定渐变的角度 background-image: linear-gradient(45deg, red, green); //设定渐变的范围 background-image...指定范围*/ background-image: radial-gradient(200px at center, green 50%, red 50%); CSS3盒子模型 CSS3中可以通过box-sizing

    1K10
    领券