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`属性或者其子属性（如`background-image`、`background-size`、`background-position`、`background-repeat`）来设置背景视频。其中，`background-size`用于控制视频的大小，`...
然后，使用`.css("backgroundImage")`方法来获取该元素的`background-image`属性值。这将返回一个字符串，格式通常是`url("图片路径")`。 为了从这个字符串中提取出实际的图片URL，我们需要进行字符串处理。这里...
总之，`background-position`是CSS中用于控制背景图片位置的强大工具，结合不同的值类型和组合，开发者可以创造出丰富的视觉效果。熟练掌握其用法和算法，能有效提升网页设计的灵活性和精细度。
CSS3的`background-size`属性就是实现响应式图片等比例缩放的关键技术之一，它解决了传统方法中图片在不同屏幕尺寸下显示不适应的问题。 `background-size`属性允许我们自定义背景图片的大小，而不仅仅是局限于图片...
本文将深入探讨如何利用PostCSS插件和微小的JavaScript脚本来实现在CSS `background`属性中使用WebP图片。 首先，让我们了解什么是PostCSS。PostCSS是一个处理CSS的工具，它允许开发者通过自定义插件来转换CSS语法...
这篇文章将会涉及css背景(background)的基本用法，包括诸如 background-attachment 等的属性，也会介绍一些有关背景(background)的常用技巧，以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。...
在网页设计中，设置背景图是常见的视觉呈现方式，CSS（Cascading Style Sheets）提供了丰富的样式控制，其中`background`属性就是用来定义元素背景的关键。在这个话题中，我们将深入探讨如何使用`background:url()`...
在本教程中，我们将深入探讨CSS的基础知识和使用方法。 ### 1. CSS的基本概念 CSS的核心在于定义选择器（Selectors）和声明（Declarations）。选择器指向HTML元素，声明则包含属性（Property）和值（Value），以...
在提供的压缩包文件`postcss-background-image-auto-size-master`中，可能包含了插件的源代码、示例用法、测试用例以及相关文档。开发者可以通过查看源码学习插件的具体实现方式，或参考文档了解如何在项目中正确...
本实例主要关注的是如何解决在Windows XP系统下，使用Internet Explorer 8（IE8）浏览器时遇到的不支持CSS3 `background-size`属性的问题。这个问题是由于IE8浏览器的内核不支持CSS3新特性导致的，而`background-...
该插件将所有缺少的后台实用程序添加到Tailwind CSS中。 安装 将此插件添加到您的项目中： # Install using pnpm pnpm install --save-dev tailwindcss-background-extended # Install using npm npm install --...
CSS 属性查询是指在 HTML 标记语言中使用的样式表语言 CSS 的各种属性的查询和使用方法。该查询包含了绝大多数常用的 HTML 标签，以及其对应的属性和用法。 字体属性（Font） * font-family：定义文本的字体系列...
本文将详细介绍`<hr>`标签的各种CSS用法。 1. **基本使用** `<hr>`标签默认会生成一条横跨页面的单线条。例如： ```html ``` 默认情况下，它具有一定的宽度、颜色和厚度。可以通过CSS来调整这些属性。 2. **...
因此，在使用`reset.css`时，最好结合`normalize.css`或现代的CSS重置方法，如`Eric Meyer Reset`或`sanitize.css`，它们不仅重置样式，还会保留一些有助于无障碍浏览和语义化的默认样式。 在实际项目中，可以将`...
**CSS2中文手册**是为Web开发者提供的一份详尽的CSS2（级联样式表第二版）属性和用法的指南。这份手册包含了各种CSS2属性的详细解释，以及相应的示例，帮助读者理解并掌握如何在网页设计中有效地应用这些属性。 ###...
这通常通过将SVG数据嵌入到CSS的`background-image`属性的`url()`函数中，使用`data:`协议来实现。例如，SVG图形可以被编码为Base64字符串，然后插入到CSS中。这种方法的一个优点是可以避免额外的HTTP请求，提高页面...
CSS可以用纯色来作为背景，也可以将背景设置为透明,background相当于xhtml中的bgcolor。 它的两个值： transparent（默认值，透明） color(指定的颜色，和文本颜色的设置方法相同) 示例： body {background-...
以上介绍的是CSS中关于背景设置的基本知识点及其用法。通过合理使用这些属性，可以有效地为网页元素设置美观的背景，从而增强网站的整体视觉效果。掌握这些基本属性的应用方法对于前端开发人员来说是非常重要的基础...
一个div同时设置background-color和background-image的话，color是处于img层下方的，无法实现遮罩效果，所以需要再创建一个div作为其子div,然后设置子div的背景颜色，介绍两种方法： 第一种，代码如下： css: ....