CSS中 background 是一个很基本的而且比较常用的样式
background : background-color || background-image || background-repeat || background-attachment || background-position
这个是 background 的几个参数,这些参数并不是都要写上的。
background-color: 背景颜色,这里可以写英文,可以写RGB,可以写#xxxxxx
transparent : 背景色透明
background-image:背景图片,只能写 none 或者 url (url)
background-repeat:背景图象的平铺
repeat : 背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
background-attachment:背景图象的流动性
scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定
background-position :背景图象的位置
length : 百分数 | 由浮点数字和单位标识符组成的长度值。
position : top | center | bottom | left | center | right
background-position 这个参数很有意思,一般可能很少人用到,不过这个参数理解好了,确实有很大的用处,首先background-position有2个参数:background-position:(X Y),这个一般有2种情况,一个是div比背景图片大,则用这个属性背景图片会在div里浮动,如div比背景图片小,那么就变成了背景图片的变幻,具体的用代码说明吧。
这个是做的一个圆角的div,
<div style="width:700px">
<div style="padding-left:8px; background:transparent url(img/corners.gif) no-repeat;">
<div style="background:transparent url(img/corners.gif) no-repeat right -8px; padding-right:8px;">
<div style="height:8px;background:transparent url(img/tb.gif) repeat-x 0 0;" ></div>
</div>
</div>
<div style="padding-left:4px; background:transparent url(img/l.gif) repeat-y;">
<div style="padding-right:4px;background:transparent url(img/r.gif) repeat-y right;">
<div style="background:#eee url(img/tb.gif) repeat-x 0 -16px;">fdsafasdfasd<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf</div>
</div>
</div>
<div style="padding-left:8px; background:transparent url(img/corners.gif) no-repeat 0 -16px;">
<div style="background:transparent url(img/corners.gif) no-repeat right -24px; padding-right:8px;">
<div style="height:8px;background:transparent url(img/tb.gif) repeat-x 0 -8px;" ></div>
</div>
</div>
</div>
- 描述: 最后的效果图
- 大小: 6.7 KB
分享到:
相关推荐
CSS中背景图片定位方法:background-position的用法,附带算法
这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachment 等的属性,也会介绍一些有关背景(background)的常用技巧,以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。...
设置背景图的方法一般是使用css的background:url来实现的,下面有个示例,大家可以参考下
该插件将所有缺少的后台实用程序添加到Tailwind CSS中。 安装 将此插件添加到您的项目中: # Install using pnpm pnpm install --save-dev tailwindcss-background-extended # Install using npm npm install --...
CSS可以用纯色来作为背景,也可以将背景设置为透明,background相当于xhtml中的bgcolor。 它的两个值: transparent(默认值,透明) color(指定的颜色,和文本颜色的设置方法相同) 示例: body {background-...
一个div同时设置background-color和background-image的话,color是处于img层下方的,无法实现遮罩效果,所以需要再创建一个div作为其子div,然后设置子div的背景颜色,介绍两种方法: 第一种,代码如下: css: ....
关于background属性用法,相信许多重构人员都很熟悉了,在css3中,background属性依然保持以前的用法,不过可以允许在该属性中添加多个背景图像组,背景图像之间通过逗号进行分隔。增加了4个新的相关属性。 ...
CSS3之多背景background和CSS2的使用方法一样,只不过图片可以从1个图片变成多个图片了,其在CSS3的项目中运用比较广泛,大家有更好的案例要积极分享哟
background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,它们有相同的可选值,即border、padding、content三种,而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间...
入门安装$ yarn add postcss-background-image-auto-size --dev用法// postcss.config.js const autoSize = require('postcss-background-image-auto-size'); module.exports = {插件:[autoSize(),],}; 示例/...
语法:background-position : length || length background-position : position || position 取值:length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位 position : top | center | ...
不过今天又仔细研究了一下css3中的blur方法,可以实现同样的效果。且配合JS可以实现模糊缩放的效果 基础先来看一下blur属性的表达式: CSS Code复制内容到剪贴板 filter:blur(add=add,direction,strength=...
linear-gradient 是CSS3中一个重要的属性,初看觉得很简单,但是别看它简单,它能实现很多复杂的图形。 代码还是比较简单的: linear-gradient(65deg,#2b7ce7,#2b7ce7 50%,transparent 0,transparent),linear-...
导入样式表的方法(示范) <style type="text/css" media="all" title="应用于所有媒体的样式"> @import url(/style/css/global.css); /*全局样式*/ @import url(/style/css/skyblue.css); /*个性化样式*/ body { ...
├01 css3元素选择器 属性选择器 伪类选择器.mp4 ├02 css3文本选择器 表单选择器 子选择器.mp4 ...├27 阿里矢量图标库的使用方法.mp4 ├28 淘宝网移动端首页开发实战1.mp4 └29 淘宝网移动端首页开发实战2.mp4