CSS设置背景缩放

2024-10-29

css样式背景图片设置缩放

一.背景颜色图片平铺 background-color 背景颜色 background-image 背景图片地址 background-repeat 是否平铺默认是平铺 background-position 背景位置 (模式是左上角 0 0) 方位没有顺序 1.(length 长度 )写精确单位或者百分比第一个值是x坐标第二个一定是y 2.(position: top|center | bottom | left | right 方位坐标) 如果方位名词只写一个另外一个默认为cent

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 设置背景图片模糊，内容不模糊

需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> .content { color: #ffffff; font-size: 40px; } .bg

css设置背景固定不滚动效果的示例

css设置背景固定不滚动效果的示例背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背景不滚动的效果 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

CSS 设置背景透明度，不影响子元素

由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素．解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 */ background: rgba(0, 0, 0, 0.6); } 2> 使用 opacity, 设置一个背景DIV,此DIV使用绝对布局 Example <div class="demo"> <div class="demo-bg"&g

CSS——设置背景

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS</title> <style type="text/css"> #style1 { font-family: "微软雅黑"; position: absolute; left: 340px; top: 123px; width: 98px

解决css设置背景透明，文字不透明

设置元素的透明度: -moz-opacity:0.8; /*在Firefox中设置元素透明度 filter: alpha(opacity=80); /*ie使用滤镜设置透明但是当我们对一个标签设置背景的透明度时,往往我们并不希望该标签上的文字图片也变成半透明了. 例如: <div><p>不透明</p></div> div{-moz-opacity:0.3;filter:alpha(opacity=30);background:#000;w

使用CSS设置背景图片，图片比较大，完全显示在一个DIV中

做的时候想要边框为比较好看的样式,需要UI切图并且放在div中,看起来会好看点像这样的,我随便挑选了一个,UI帮我切图出来需要把这个图片填到相应的div里面,但是很显然碰到一个问题,图片太大,而且放进去以后还不是响应式的那么解决问题的就来了: background:url(1.jpg);-webkit-background-size: 100px 60px; 这样还不是响应式应该怎么办呢 IMG加载的图片width设置为100%,高度会按照width的值自动等比率缩放背景图片用backg

css设置背景图片，ie显示不了

本来是想给导航栏<div class="nav"></div>添加背景图片的,设置css样式如下: .nav{background:url("http://img.pincai.com/article/repeatBg.gif") repeat-x scroll 0 -161px rgba(0,0,0,0); } 但不知道为什么在ie6.7.8下,背景都无法显示,在更高级的ie和Firefox.chrome下都是正常的. 排除图片链接的有效性

（转）background-position—CSS设置背景图片的位置

background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-position 属性的标记(例如 body 标记)在左上角开始出现的,但实际制作时设计者往往希望背景图片出现在指定的位置 background-position:在CSS中通过background-position属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了background-pos

css设置背景图片自适应

CreateTime--2017年12月25日16:36:07 Author:Marydon 控制背景图片100%自适应填充布局 /* 控制背景图片100%自适应填充布局 */ body{ background-image: url(java八种基本数据类型介绍.png); background-size:100% 100%; /* firefox 浏览器 */ -moz-background-size:100% 100%; /* Safari 浏览器 */ -webkit-backgrou

css 设置背景图片透明

最终效果: 背景图片css不变,再背景图片的里层元素设置css样式即可 opacity:0.4; filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */

CSS设置背景透明字体不透明

写CSS时给容器设置透明度的时候如果使用background-color: #000000; opacity: 0.5;这时会出现容器里的文字也跟着透明.解决办法是不用十六进制的色值和透明度分开写,使用background-color: rgba(000, 000, 000, 0.5);这样容器内的文字就不会透明了.

css设置背景图片

background:pink;图片在背景图上面 background-image:url(food.jpg);一张图片铺满一行background-repeat:repeat-x;同一张图片多张铺满横向 background-repeat:repeat-y;同一张图片多张铺满纵向 background-repeat:no-repeat;只在左上角显示一张按图片原来的大小显示 background-attachment:fixed;把图片固定在某处,图片不随着滚动条的滚动上下移动 backgro

css 设置背景图片铺满固定不动

#page{ position: relative; width: 100%; height: 100%; background-image:url(../img/bg.JPG); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; float: left; }

CSS实现背景图尺寸不随浏览器缩放而变化

方法一. 把图片作为background,方法二使用img标签.同时要有一张足够大尺寸的图片. 方法一. 把图片作为background 有几个CSS的属性要提一下:background-size:cover,这个CSS3的属性作用是把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中,如果不使用这个属性,在IE11和FireFox中缩放浏览器,背景图片会随之缩小,同时使用-webkit-background-size: cover和-o-back

【CSS】css网页背景图片设置

刚学CSS,了解了下网页背景图设置,顺便记录下. 下面主要是实现背景图位置保持不变,即不随滚动条动而动的功能. body { background-image:url(images/bck.png); background-repeat:no-repeat; background-attachment:fixed; background-position:0px 0px; background-size:cover; -moz-background-size:60px 100px; /* 老版本

CSS 实现背景图尺寸不随浏览器缩放而变化

一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变: 再比如花瓣网( http://www.huaban.com): 这样做的好处是,比如当你在1024*768px分辨率的屏幕上看到完整的背景,再换至1280*800px分辨率的显示器浏览,不会出现背景不能充满屏幕的情况.换句话说,就是在各个分辨率的显示器下都能看到充满屏幕的背景图. 现在用CSS来实现这一效果. 首先需要一张足够大尺寸的图片,上图百度背

[译]HTML&CSS Lesson7: 设置背景和渐变色

背景对网站的设计有重大的影响.它有利于建立网站的整体感觉,设置分组,分配优先级,对网站的可用性也有相当大的影响. 在CSS中,元素的背景可以是一个纯色,一张图,一个渐变色或者它们的组合.在我们决定如何实现背景之前,我们要考虑到背景是为了网站的整体布局服务的. 在这节课中,我们将会学习如何在元素上实现各类背景色,包括渐变色.同时我们也会接触到一些CSS3的背景属性. 添加背景色给元素添加背景的最便捷方式就是使用background属性或background-color添加一个纯色背景.backg

这些HTML、CSS知识点，面试和平时开发都需要 No5-No7（知识点：文字设置、设置背景、数据列表）

系列知识点汇总这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置.设置背景.数据列表) 这些HTML.CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作.构建表单) 这些HTML.CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作.代码编写规则) No5.文章段落 1.文字属性文字属性包含font-*和tex

CSS设置背景 缩放

热门专题

CSS设置背景缩放