首页 爱情文章 亲情文章 友情文章 生活随笔 校园文章 经典文章 人生哲理 励志文章 搞笑文章 心情日记
  • 爱情文章
  • 亲情文章
  • 友情文章
  • 生活随笔
  • 校园文章
  • 经典文章
  • 人生哲理
  • 励志文章
  • 搞笑文章
  • 心情日记
  • 英语文章
  • 范文大全
  • 作文大全
  • 新闻阅读
    •
    当前位置: 山茶花美文网 > 励志文章 > 正文

    如何用CSS实现大背景网页设计:网页设计工资一般多少

    时间：2018-08-11来源：山茶花美文网 本文已影响 人 山茶花美文网手机站

    自从我发布了大背景网页设计合集之后，我收到了很多电子邮件询问如何用css实现大背景的网页设计。因此我决定和大家分享大背景网站的设计技巧。在此教程中，我会用一些实例来说明如何用一张或者两张图片实现大背景网站的设计。

    经常会犯的错误：背景被裁减（查看示例）

    查看示例文件，在小于1280分辨率时，是没有问题的。但是如果你的显示器的分辨率大于1280像素，你会看到背景图片以外的部分。

    如何用CSS实现大背景网页设计1

    实例1：一张图片（查看示例）

    简单的解决问题的方法：将图片边缘的颜色设置成和网页背景色相同的颜色。这里我用Web Designer Wall作例子，看下面的图片，注意图片的边缘是纯色的。

    如何用CSS实现大背景网页设计2

    CSS部分

    这部分很简单，为body元素设置背景图像（定位于center，top）

    如何用CSS实现大背景网页设计3

    以下是css代码：

    body {
      padding: 0;
      margin: 0;
      background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;
      width: 100%;
      display: table;
    }

    注意观察在body选择符内有两条额外的线条，这样是为了防止当浏览器窗口比内容宽度小时，背景图片的改变。（这在firefox会出现）

    如何用CSS实现大背景网页设计4

    实例2：两张图片（查看示例）

    我将会用到Design Jobs on the Wall做例子，我给body标签应用了重复的软木板的图案，然后给wrapper标签应用了居中的背景图案。

    如何用CSS实现大背景网页设计5

    这里的诀窍在于给Gif图像使用了和软木背景相似的但却更深的颜色。

    如何用CSS实现大背景网页设计6

    实例3：天空背景（查看示例）

    在这个例子中，我给body标签应用了1个像素的水平方向重复的渐变。然后我给wrapper标签加上了一张居中的云朵背景图片。

    如何用CSS实现大背景网页设计7

    更新：给html选择符应用天空背景图片（查看示例）

    感谢读者的评论，以下是给html选择符应用了渐变背景，因此wrapper标签就不再需要了，这是更为简洁的一个方法。

    如何用CSS实现大背景网页设计8

    原文链接：How to: CSS Large Background

    • 如何用CSS实现大背景网页设计:网页设计工资一般多少 相关文章:
    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全

    最新文章

    热点文章

    推荐访问

    军训远足心得体会 军训爬山心得体会 大学军训徒步拉练感想 军训徒步作文 军训徒步10公里感想 军训徒步心得体会 5分钟演讲中秋节节日 中秋一分钟演讲 中秋节演讲稿4分钟 中秋节演讲稿一分钟 中秋节演讲稿五分钟 3-5分钟 中秋节短篇演讲稿 中秋节演讲稿两分钟 中秋节的演讲稿3分钟 关于中秋节的演讲稿三分钟 孩子体验军训的心得 参加孩子军训活动的感受与收获 家长对孩子军训后的收获和感悟 小孩军训的收获与感悟 学生军训的收获与感悟 孩子军训成长过程家长感悟 孩子军训感悟 孩子军训心得体会 孩子军训的收获与感悟 兵役前训练心得体会 部队当兵的心得 新兵役前教育训练心得体会 预备役军训心得体会 新兵军训感悟

    本文如何用CSS实现大背景网页设计:网页设计工资一般多少由山茶花美文网整理提供，版权归原作者、原出处所有。

    Copyright © 山茶花美文网 All Rights Reserved.