css-css背景

CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果

一:背景色background-color 属性

p {background-color: gray;}

二:背景图像 background-image 属性

body {background-image: url(/i/eg_bg_04.gif);}

三:背景重复background-repeat 属性

  属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。

  repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,

  no-repeat 则不允许图像在任何方向上平铺

  

body
  {
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

四:背景定位background-position 属性

 为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异 

body
  {
    background-image:url(‘/i/eg_bg_03.gif‘);
    background-repeat:no-repeat;
    background-position:center;
  }

五:背景关联background-attachment 属性

body
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }
时间: 2024-10-07 09:16:47

css-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

css加背景图代码

CSS让背景平铺的代码 repeat-x ,也就是沿着X方向重复下去(横向平铺): repeat-y (纵向平铺) {   background-image: url('#.jpg);  background-repeat: repeat-x  } 网页默认全屏平铺代码 来源body{background:url(#.gif)} 这样的代码代码可以应用于淘宝店的装修

CSS实现背景透明,文字不透明(各浏览器兼容)

来自:http://www.cnblogs.com/radom/archive/2010/06/06/1752660.html /*CSS*/.waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; line-height:28px; font-size:12px; font-family:Arial, Helvetica, sans-serif;}.con{ tex

(转)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设置背景固定不滚动效果的示例

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

4.CSS实现背景半透明效果

写在前面的话: ~ 原文链接:CSS实现背景半透明效果 HTML <div class="alpha1"> <div class="ap2"> <p>背景为红色(#FF0000),透明度20%.</p> </div> </div> CSS .alpha1{ width:300px; height:200px; background-color:#FF0000; filter: Alpha(Opa

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

CSS渐变背景的6个演示代码

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS渐变背景的6个演示代码 - 石家庄瑜伽老师培训</title> <script> var setGradient = (function(){ var p_dCanvas = document.createElement('canvas'); var p_useCanvas = !!( typeof(p_d