CSS3背景图片

3.背景图片:

background-image:url(4.jpg);

background-position:1200px 50px;(代表左右，上下)

background-size:cover(图片被压缩等比例显示)

background-size:contain(图片被水平垂直压缩全显示)

background-repeat:no-repeat;(不重复)

4.边框图片:

border-image-repeat:stretch.

stretch:拉伸

repeat:重复

round:通过自身调整完全显示

边框可以被切割为9个部分，

边框四角是设置的大小，

而中间的一个是空的，一则是被拉伸、

重复、平铺。

时间： 2024-08-08 09:21:47

CSS3背景图片的相关文章

css3背景图片百分比

原文链接:http://caibaojian.com/background-position-percent.html background-position: 50% 0; background-size: 100% auto: via对background-size:100% auto,意思是背景图片宽度为元素宽度*100%,高度等比缩放.详情可见css3 background.原文来自:http://caibaojian.com/background-position-percent.ht

css3 背景图片

1.background-repeat 通常背景图的宽高不可能刚好和容器大小一致,(在no-repeat情况下)所以经常多出一些空白区域.为了铺满容器,背景图会以重复的方式继续填充容器,当剩下的空间已经不够一张图片的大小时,如何处理这个剩余的空间就是这个属性的使命 他有个值: repeat - (默认),不管图片能否显示完整,继续平铺,结果通常就是显示半张图片(空间不够了嘛) repeat-x - 水平方向平铺 repeat-y - 垂直方向平铺 no-repeat - 不重复,只显示一张图片

CSS3 background-image背景图片相关介绍

这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: background-image :设置元素的背景图片. background-repeat :设置如何平铺背景图片. background-attachment :设置背景图片是否固定或随着滚动移动. background-position :设置背景图片的位置. background-size

CSS3背景闪烁和图片缩放动画效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3感应鼠标的背景闪烁和图片缩放动态效

CSS3：background-size背景图片尺寸属性

background-size可以设置背景图片的大小,数值包括 长度length和百分比percentage. 并且会根据背景原点位置background-origin设置其图片覆盖的范围.那么下面我们一起来了解这个background-size属性吧. background-size语法 w3c对background-size的语法规定如下: 属性名: background-size 属性值: <bg-size>* 其中 bg-size = [ <length> | <pe

css3设置背景图片的大小

background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. 语法: 1 background-size:auto;/* 默认值,不改变背景图片的高度和宽度 */ 2 background-size:100px 50px;/* 第一个值为宽,第二个值为高,当设置一个值时,将其作为图片宽度来等比缩放 */ 3 background-size:10%;/* 0%~100%之间的任何值,将背景图片宽高按百分比显示,当设置一个值的时候同

《图解CSS3——第4章 CSS3背景-1》

CSS3背景 4.1 CSS3背景属性简介 background是一个使用率很高的属性,也是一个十分有用的属性,能帮助设计师实现一些特殊的效果,使用起来也非常简单. 4.1.1 背景的基本属性 背景主要包括五个属性: background-color(背景颜色) background-image(背景图片) background-repeat(背景图片展示方式) background-attachment(背景图片是固定还是滚动) background-position(背景图片位置) 可以单独

移动端rem布局背景图片使用以及sprite雪碧图

现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景图片. rem布局 所谓rem布局就是指为文档的根节点<html>元素设置一个基准字体大小,然后所有的元素尺寸都以rem为单位来写.比如将<html>的字体设为100px,如果需要做一个100*200的元素,css如是写: div{ width: 1rem; height: 2rem; } 那么最终

基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效

本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: <style type="text/css"> #liu{ width:280px; height: 279px; background: url(shishi.png) no-repeat; border-radius:140px; -webkit-animation:run 6s