云水论坛

标题: 【原创笔记】Discuz! X1.5顶部和页面背景图片后台设置+页头高度设置及CSS中background的用法 [打印本页]
作者: 森森    时间: 2011-2-1 18:24
标题: 【原创笔记】Discuz! X1.5顶部和页面背景图片后台设置+页头高度设置及CSS中background的用法


                                                                                 ----云水.墨

顶部图片

附加属性格式：

例：top center no-repeat

top=顶端显示，center=居中显示，no-repeat=不平铺


 

页面背景格式默认为 repeat-x 0 0  =左上角横向平铺

如删除成空白，则默认横向竖向全平铺。

 

css中背景图片的用法：

例：

background: repeat-x 0 0”
背景以X轴（横向）平铺，起始平铺的位置是x坐标为0，y坐标为0，就是左上角横向平铺。
background: repeat-x 0 -50px

Y坐标为负的50像素横向平铺。


repeat的用法

repeat : 默认值。在纵向和横向上平铺
no-repeat : 不平铺
repeat-x : 仅在横向上平铺
repeat-y : 仅在纵向上平铺

举例：background: url("images/1111.gif"); 

 

discuz! x1.5 页头背景高度如何设置？

方法1：

页头背景高度会自动适应LOGO高度，如果非要设定的话。

找到：template\default\common\common.css
在这一行#hd h2 { padding: 0 20px 8px 0; float: left; } ，加入height: *px;或修改padding的值，


如果不想全改，只改某个配色套系模板
找到：template\default\style\*\style.css
加入 #hd h2 { height: *px; } ，或者用padding参数也可
 

方法2：

调整缺省风格界面的页头高度：


找到bbs\templates\default\css_append.htm

输入以下代码：#header .wrap { height:72px;}
72px为自己需要的高度；


其他风格页头高度，打开相应风格目录下css_append.htm
找到：#header .wrap { padding: 0; height: 135px; }
修改成自己需要的高度


也可在后台-优化设置-其他头部信息中加入相应代码。


方法3

给logo图片加上附加属性，例logo.png,80,240

可以撑开顶部高度


作者: 森森    时间: 2011-2-1 18:52
A、背景重复方式：
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
B、背景滚动方式：
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。
C、背景图片X、Y点起始位置：
•top left
•top center
•top right
•center left
•center center
•center right
•bottom left
•bottom center
•bottom right

如果您仅规定了一个关键词，那么第二个值将是"center"。

x% y% 左上角是 0% 0%。右下角是 100% 100%。
如果您仅规定了一个值，另一个值将是 50%。

xpos ypos 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
如果您仅规定了一个值，另一个值将是50%。

这里举几个例子：
a、图片从左上角平铺：“repeat 0 0",因为默认值可省略，所以此时参数空白，效果也相同。
b、图片不平铺、水平居中：“no-repeat  50% 0%"

作者: 森森    时间: 2011-2-12 00:56
以下引用网络技术文集：

CSS中background的用法

CSS中  background 是一个很基本的而且比较常用的样式

background : background-color || background-image || background-repeat || background-attachment || background-position

这个是 background 的几个参数，这些参数并不是都要写上的。

background-color： 背景颜色，这里可以写英文，可以写RGB，可以写#xxxxxx
                   transparent : 　背景色透明

background-image：背景图片，只能写 none 或者 url (url)

background-repeat：背景图象的平铺
                   repeat : 　背景图像在纵向和横向上平铺
                   no-repeat : 　背景图像不平铺
                   repeat-x : 　背景图像在横向上平铺
                   repeat-y : 　背景图像在纵向平铺

background-attachment：背景图象的流动性
                       scroll : 　背景图像是随对象内容滚动
                       fixed : 　背景图像固定

background-position ：背景图象的位置
                      length : 　百分数 | 由浮点数字和单位标识符组成的长度值。
                      position : 　top | center | bottom | left | center | right

background-position 这个参数很有意思，一般可能很少人用到，不过这个参数理解好了，确实有很大的用处，首先background-position有2个参 数：background-position:(X Y),这个一般有2种情况，一个是div比背景图片大，则用这个属性背景图片会在div里浮动，如div比背景图片小，那么就变成了背景图片的变幻，具体 的用代码说明吧。

这个是做的一个圆角的div，
<div style="width:700px">
    <div style="padding-left:8px; background:transparent url(img/corners.gif) no-repeat;">
        <div style="background:transparent url(img/corners.gif) no-repeat right -8px; padding-right:8px;">
            <div style="height:8px;background:transparent url(img/tb.gif) repeat-x 0 0;" ></div>
        </div>
    </div>
    <div style="padding-left:4px; background:transparent url(img/l.gif) repeat-y;">
        <div style="padding-right:4px;background:transparent url(img/r.gif) repeat-y right;">
            <div style="background:#eee url(img/tb.gif) repeat-x 0 -16px;">fdsafasdfasd<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf</div>
        </div>
    </div>
    <div style="padding-left:8px; background:transparent url(img/corners.gif) no-repeat 0 -16px;">
        <div style="background:transparent url(img/corners.gif) no-repeat right -24px; padding-right:8px;">
            <div style="height:8px;background:transparent url(img/tb.gif) repeat-x 0 -8px;" ></div>
        </div>
    </div>
</div>



----------------------------


作者: 森森    时间: 2011-2-12 00:57
以下引用网络技术文集：


CSS中background属性简介以及用法


      CSS中background属性简介以及用法， CSS的背景属性“background”提供了众多属性值，如颜色、图像、定位等，为网页背景图像的定义提供了极大的便利。

      那么首先我们来看看background的属性值：

      background : background-color | background-image | background-repeat | background-attachment | background-position

      根据属性的名称我们就可以判断出具体的意思：颜色、图像、铺排、滚动、定位。另外需要注意的是：其中background-repeat、background-position必须是在指定了background-image属性值后才有效。

　　background-attachment:scroll | fixed 。“scroll”是背景图像随对像内容滚动，“fixed”则是背景图像固定。

　　background-image:none | url 。默认属性值是无背景图，需要使用背景图时可用url进行导入。

　　background-color:transparent | color 。“transparent”是background-color的默认属性值（红色字表示默认值），意为背景色透明，也就是无背景色；而“color” 则指的是颜色了，可以是HTML语言支持英文单词，也可以是十六进制的颜色值，当然推荐还是使用十六进制的颜色值来表示，比如黑色使用“#000”。

　　background-repeat:repeat | no-repeat | repeat-x | repeat-y 。默认属性值是背景图像在纵向和横向上平铺，如果不希望图像平铺而是以一个完整的衬图来显示的时候则使用“no-repeat”，相同的道理在横向上平铺 则是使用”repeat-x”纵向上平铺则使用”repeat-y”。

　　background-position:position(length) | position(length) 。对象的背景图像位置有两种方式可选择，一种是使用position（top | center | bottom | left | center | right）来定位背景图像位置，而另一种方式则是使用lefgth（数值）来定位，使用数值需要注意的是，当只有一个数值时，这个值将用于横坐标，纵坐 标将默认是50%，如果有两个数值时，则分别是横坐标、纵坐标。

　　还有一个小技巧：在定义了background-image属性之后，应该定义一个与背景图像颜色相近的background-color值，这样在网速缓慢背景图像未加载完成或是背景图像丢失之后，仍然可以提供很好的文字可识别性。

      例如目前是用作灰色做背景图的，但是如果使用图片做背景的话，那么如果图片存在则一定显示图片背景，反之则图片不存在就会以这个灰色作为背景色。这样提高网站的客户体验度。






欢迎光临 云水论坛 (http://www.yunshui.net/) Powered by Discuz! X2.5