首页 > 代码库 > css基础 设置背景 背景色 背景图片 不平铺 背景图片在x、y轴上的位置
css基础 设置背景 背景色 背景图片 不平铺 背景图片在x、y轴上的位置
镇场诗：
清心感悟智慧语，不着世间名与利。学水处下纳百川，舍尽贡高我慢意。
学有小成返哺根，愿铸一良心博客。诚心于此写经验，愿见文者得启发。
——————————————————————————————————————————
code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
/*first,全局css设置*/
/*去除内外边距后，兼容性好*/
html,body,h1,p{
padding:0px;
margin:0px;
}
/*去除项目符号*/
ul,li,ol{list-style:none;}
/*全局链接初始化*/
a:link,a:visited{color:blue;text-decoration:none;}
a:hover{color:red;}
/*网页中的普通文字 标题的大小不变，超链接的颜色不变*/
body{font-size:12px;color:#444;background-color:#ccc;}
/*second,新闻模块设置*/
.news{
border:1px solid #b200ff;
width:400px;
margin:40px auto;/*div在网页中居中显示*/
padding:20px 20px 176px;/*边线到内容的距离*/
/*171px的内填充是用来装载图片的*/
/*加背景图*/
/*背景色 背景图 不平铺*/
background:white url(images/bgpicture.jpg) no-repeat;
/*控制背景图的方位*/
background-position-x:152px;/*400+20+20-20-268(内容宽+左右填充和-图片宽度-图片到右边的距离)*/
background-position-y:bottom;
}
.news .title{
padding:5px 0px 10px;/*内填充 上5 下15 左右0px*/
text-align:center;
}
.news p{
text-indent:25px;/*首行缩进*/
line-height:150%;
padding:7px 0px;/*内填充 上下16 左右0*/
}
</style>
</head>
<body>
<div class="news">
<h1 class="title">九华山地藏菩萨露天铜像</h1> <!--块元素h1,p 自动撑满父元素-->
<p class="newsContent1">九华山地藏菩萨露天铜像坐落于中国四大佛教名山之一、国家级重点风景名胜区、首批5A级旅游景区的九华山。1995年开始筹建，由顶峰国际规划设计公司承担景区规划设计，圣像主体高99米，是目前世界上最高的露天地藏菩萨大铜像，是九华山国际性佛教道场的标志性景观。</p>
<p class="newsContent2">九华山地藏菩萨露天铜像，像身高度84米，加上莲花座底盘高度99米，整个铜像连同底座高155米，是目前世界上最大最高的佛教造像之一。地藏菩萨为比丘相，右手持锡杖，左手持摩尼宝珠。面向西北方，端庄慈祥，以示“昭示众生，国泰民安”。</p>
</div>
</body>
</html>
文字介绍节选自《百度百科》
result:
——————————————————————————————————————————
博文的精髓，在技术部分，更在镇场一诗。编辑器 VS2015,浏览器 Firefox。
html+css+js，强，值得努力学习。我跟着传智播客的视频教程学习。
我是一个新手，所以如果博文的内容有可以改进的地方，甚至有错误的地方，请留下评论，我一定努力改正，争取成就一个良心博客。
注：此文仅作为科研学习，如果我无意中侵犯了您的权益，请务必及时告知，我会做出改正。
css基础 设置背景 背景色 背景图片 不平铺 背景图片在x、y轴上的位置
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。