CSS截取背景图片

background五个重要属性

background-color: 指定填充背景的颜色。
background-image: 引用图片作为背景。
background-position: 指定元素背景图片的位置。
background-repeat: 决定是否重复背景图片。
background-attachment: 决定背景图是否随页面滚动。

.mybg {
width: 800px; /*截取图片的宽度*/
height: 800px; /*截取图片的高度*/
background-image: url(Repair101.jpg); /*添加背景图片*/
background-position: 400px 400px; /*从背景图片截取的位置- x,y坐标*/
}

.mybg {
width: a; /*截取图片的宽度*/
height: b; /*截取图片的高度*/
background-image: url(Repair101.jpg); /*添加背景图片*/
background-position: c d; /*从背景图片截取的位置- x,y坐标, c、d为百分比*/
}

x = a+c; y = b*d;

时间: 2024-10-11 11:05:51

CSS截取背景图片的相关文章

img只显示图片一部分 或 css设置背景图片只显示图片指定区域

17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左上角为0,0或0%,0%,右下角为高度和宽度,或100%,100%. clip:rect(300px 100px 300px 0px); 设置显示图片的某个区域,分别是上右下左的顺序设置 部分代码:<style type="text/css">img {position:abs

CSS设置背景图片代码

CSS设置背景图片代码:设置背景图片并不难,但是有时候会忘记url的格式怎么写,之所以写这篇文章,就是让忘记者查询到,寄希望提供一定的帮助.代码如下: background-image:url(mytest/demo/small.jpg) 相关阅读:1.background属性可以参阅background属性用法详解一章节. 2.background-image可以参阅CSS的background-image属性一章节. 原文地址是:http://www.softwhy.com/forum.ph

HTML学习笔记8——CSS设置背景图片

注意点:   background:blue: 与 background-color:blue: 不一样! 一.关于background设置:   1)background:blue:   2)background-image:url(图片名称): 当背景既有颜色,又有图片时,哪个在后面哪个就生效,如下例所示: 此处写了“新宋体”的这张图片作为本文涉及到的背景图片. 以图片为背景时,若图片小于页面大小,则图片会一直重复直到铺满为止: 字在后面时,字生效 1 <!DOCTYPE html> 2

(转)HTML&amp;CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是

如何通过CSS实现背景图片自动平铺或拉伸至整个屏幕(自适应大小)

默认情况下,通过HTML代码的BODY标签设置好背景图片<body background="x.jpg"> 后,图片会自动横向和纵向平铺.这就会产生一些美观上的问题. XP人提供CSS代码如下,放在页面头部即可,仅供参考: <style type="text/css"> body { background:url(/img/background.png); background-repeat: repeat-x; background-pos

CSS常用背景图片定位方法

CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会改变元素的层级关系,如果在多个地方使用,这样的层叠嵌套的关系会十分混乱. 先暂时抛弃那种方案,给大家分享几种CSS背景图片定位的方案. 整篇文章会按照如下思路: 1.无依赖的absolute定位 2.background-position扩展语法 3.background-origin定位 4.ca

转 Div+Css控制背景图片水平垂直居中显示 背景铺满全屏

在Web开发中我们经常要碰到这样的问题:在为一个页面设置背景图片之后往往希望图片能够在分辨率比较大的情况下水平垂直都居中显示.通常水平居中显示在Css中是很容易做到的,而垂直居中就需要使用一些Css的技巧: 1. 首先为了能使得网站能够根据浏览器大小自适应,我们需要将页面的body元素height值设为100%,而在这之前,我们需要将xhtml验证从网站头删除.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

CSS控制背景图片100%自适应填充布局

原文地址:http://blog.csdn.net/wd4java/article/details/50537562 .personal_head { width: 100%; height: 35%; background: url("../../../static/img/headbg.jpg") no-repeat; background-size: 100% 100%; position: absolute; filter: progid:DXImageTransform.Mi

js+css让背景图片动起来

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css+js让背景图片动起来</title> <style> *{ margin:0; padding:0; } #section{ width: 800px; height: 300px; margin:0 auto; background:u