`
ganqing1234
  • 浏览: 171748 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

css 图片相关属性

CSSIE网络协议 
阅读更多

      首先是导入背景图片，background-image属性，它后面一般会接一个url（。。），里面存有图片的路径，以斜杠/开头的表示绝对路径，否则表示相对路径，这里的相对路径是指相对于css样式文件的路径而不是页面文件的存储位置。当然也可以以网络地址来引用图片，这样的路径必须以协议开头，如：http://。

       background-repeat，该属性有四种取值，repeat，no-repeat，repeat-x，repeat-y，默认的为repeat。

       background-position，有三种取值方式：一个是采用center， top，right，left，bottom这几种来对图片定位，还有一种更为精确的采用像素来定位，如background-position：8px 10px；三是采用百分比格式，如：background-position：10% 50%；默认值是左上方。这里的定位是相对于背景图片所在的容器而言的。background-position会影响background-repeat的效果，因为图片重复是在图片定位完成之后进行的。

       background-attachment，这个属性有两个值fixed，scroll，默认是scroll，它表示背景不随页面scroll而滑动。需要注意的是ie6和它之前的ie版本，这个属性只能针对<body>标签。

 

      背景图片的简写，background: background-color background-image background-attachment background-position background-repeat, 如:body { background: #FFF url(bullseye.gif) scroll center center no-repeat; }

 

 

 

分享到：
| css float 使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS3动画属性边框属性等

    本篇将详细阐述CSS3中的关键知识点，包括动画属性、边框属性、背景属性以及其他的样式属性。 **CSS3动画属性**允许开发者创建复杂的动态效果。`@keyframes` 规定了一个动画的帧，定义了从一种样式到另一种样式的...

    CSS 图片下载器CSS图片下载器

    CSS图片下载器的运作方式通常是解析指定的CSS文件或整个项目中的所有CSS文件，寻找那些设置为背景图片的属性（如`background-image`）。然后，它会提取出图片URL，将这些URL转换成内联的base64编码的CSS语句，或者...

    css属性大全（css的所有属性）

    本文将深入探讨CSS中的几个关键属性，包括背景、字体、区块和边框属性。 一、背景属性 背景属性允许我们对元素的背景进行定制，包括颜色、图像、重复方式、附加行为以及位置。例如，`background-color`用于设置元素...

    网页设计必备-CSS图片批量下载(CSS图片抓取大师).rar

    这就是"CSS图片批量下载(CSS图片抓取大师)"工具发挥作用的地方。 首先，理解CSS中的图片引用。在CSS中，我们可以通过`background-image`属性来为元素添加背景图，通过`content`属性在伪元素中插入内容，如图标，...

    css背景属性案例

    本文将详细介绍CSS背景属性的相关知识点，并结合一个具体的案例来帮助大家更好地理解和掌握这些属性。 #### 二、CSS背景属性概述 CSS背景属性主要包括以下几个方面： 1. **`background-color`**：设置元素的背景...

    12种炫酷CSS3图片切换过渡效果

    5. **3D翻转**：CSS3的`transform: perspective()`和`rotateX`、`rotateY`属性可以实现3D翻转效果，让图片仿佛在空间中翻转，为用户带来立体感。 6. **裁剪过渡**：利用`clip-path`属性，可以实现图片被裁剪成不同...

    根据图片大小自适应的CSS

    通过以上对“根据图片大小自适应的CSS”的深入探讨，我们可以看到，合理运用CSS和HTML的相关属性，可以有效地实现图片的自适应显示，提升用户体验，同时也让网站在各种设备上都能展现出良好的视觉效果。

    CSS图片批量下载

    "CSS图片批量下载"指的是从使用CSS样式的网页中一次性下载所有被引用的图片资源。这个过程对于设计师或开发者来说非常有用，例如，当他们需要备份一个网站的视觉元素，或者分析竞争对手的网页设计时。 批量下载CSS...

    CSS图片下载器

    "CSS图片下载器"是一个工具，专门用于从CSS（层叠样式表）文件中提取并下载所引用的图片资源。这个工具对于网页开发者、设计师以及需要批量管理网站资源的人员来说非常实用。在网页设计中，CSS常用来控制页面元素的...

    CSS样式图片下载助手，css背景图片下载

    1. **CSS背景图片属性**：在CSS中，`background-image`属性用于设置元素的背景图片。其语法是 `background-image: url("image-url")`，这里的"image-url"是图片的网络地址。此外，还有其他相关属性，如`background-...

    css特效 DIV_CSS图片滚动效果

    在本教程中，我们将探讨“CSS特效：DIV+CSS图片滚动效果”。 1. **什么是DIV？** - `div`是HTML中的一个块级元素，全称为Division，意为分隔或分区。它通常用来组织网页内容，通过CSS来控制其样式和布局。 2. **...

    CSS图片3D旋转效果

    CSS不仅可以控制页面布局，还能实现丰富的动态效果，比如我们今天要讨论的“CSS图片3D旋转效果”。 这个效果是通过CSS3的3D转换功能实现的，它允许我们在二维平面上展示三维对象，让网页元素呈现出立体感。当鼠标...

    使用CSS属性制作图片HTML缩略图

    可以使用CSS的`object-fit`属性来调整图片在容器内的填充方式，如`contain`（保持宽高比填充容器，图片不会超过容器）或`cover`（保持宽高比填充容器，图片完全覆盖容器）： ```css img { object-fit: cover; /* ...

    纯div+css轮播图片切换图片

    例如，可以创建多个包含图片的div，然后利用CSS选择器和定时器来交替更改这些div的`display`属性，从而实现图片的切换效果。 二、电子相册 电子相册是图片切换的一种高级形式，它通常包含更多的交互功能，如导航...

    DIV+CSS 图片垂直居中效果

    在CSS中，通过设置`position`属性为`absolute`，然后调整`top`和`bottom`或`left`和`right`属性，可以实现图片的垂直居中。例如： ```css .container { position: relative; } .image { position: absolute; ...

    css3马赛克样式图片切换

    2. **背景图片与伪元素**：另一种方法是使用`::before`或`::after`伪元素，并设置`background-image`属性，通过CSS3的`background-size`控制每个马赛克单元的图片大小，`background-position`调整图片的位置，以及`...

    CSS浮动属性Float详解 什么是CSS Float？

    CSS 浮动属性 Float 详解 CSS 浮动属性 Float 是一种重要的定位属性，允许页面元素浮动在其他元素旁边。Float 属性可以取四个值：Left、Right、None 和 Inherit。其中，Left 和 Right 分别浮动元素到左边和右边，...

    CSS图片高亮效果

    在提供的文档（如`css图片高亮效果.docx`和`css图片高亮效果.pdf`）和源码中，您应该能找到更具体的示例和代码实现，以便于理解和应用到自己的项目中。 总之，Div+CSS结合可以实现丰富的网页元素控制，包括图片的...

    纯css图片无缝走马灯效果源码

    【纯CSS图片无缝走马灯效果源码详解】 在网页设计中，动态的图片展示能够吸引用户的注意力，提升用户体验。"纯CSS图片无缝走马灯效果"是一种常见且实用的技术，它利用CSS3的动画（Animation）和过渡（Transition）...

    Css+div_常用CSS标签及属性

    Css+div_常用CSS标签及属性 Css+div是Web开发中最常用的技术之一，Css是用于描述网页样式和布局的标记语言，而div是Html中最基本的布局标签。本文将从Css+div的角度，总结常用的Css标签及属性，并进行分类。 Css中...

Magicbox
Global site tag (gtag.js) - Google Analytics