您的位置:首页 > 财经 > 产业 > CSS学习6--背景图片、颜色、位置、附着、简写、透明、缩放、多背景、凹凸文字、导航栏例子

CSS学习6--背景图片、颜色、位置、附着、简写、透明、缩放、多背景、凹凸文字、导航栏例子

2025/2/25 21:17:10 来源:https://blog.csdn.net/qq_54641174/article/details/141720049  浏览:    关键词:CSS学习6--背景图片、颜色、位置、附着、简写、透明、缩放、多背景、凹凸文字、导航栏例子

CSS背景

  • 一、背景颜色和图片
  • 二、背景位置
  • 三、背景附着
  • 四、背景简写
  • 五、背景透明
  • 六、背景缩放
  • 七、多背景
  • 八、凹凸文字
  • 九、导航栏例子

一、背景颜色和图片

  • background-color: pink; 背景颜色
  • backgroundoimage: url(##.jpg); 背景图片
  • background-repeat: 平铺 repeat-x横向平铺,repeat-y纵向平铺;

平铺不到的地方显示背景颜色。

<html><head><style>div {width: 400px;height: 500px;background-color: pink;background-image: url(1.jpg);background-repeat: no-repeat;}</style></head><body><div></div></body>
</html>

二、背景位置

background-position: 更改背景图片位置,可以写两种值:

  • position包括top,center,bottom,left,right;顺序无所谓;
  • length写x和y坐标,以页面左上角为0点,向右为x轴,向下为y轴;
  • 实际应用的时候也可以两种混搭: 10px center;
<html><head><style>div {background-color: pink;background-imgage: url(1.jpg);background-repeat: no-repeat;background-position: left top; /*默认左上角*//*如果方位名词只写一个,另一个默认center*/background-position: 10px 30px;/*精确单位,第一个值是x坐标,第二个值是y坐标*/}</style></head><body><div></div></body>
</html>

三、背景附着

设置背景内容随对象内容滚动还是固定。

  • scroll; 背景内容随内容滚动
  • fixed; 背景内容固定
<html><head><style>body {background-color: pink;background-imgage: url(1.jpg);background-repeat: no-repeat;background-position: left top;background-attachment: scroll;	}</style></head><body><div></div></body>
</html>

四、背景简写

background: 背景颜色 背景图片 背景平铺 背景滚动 背景位置。

<html><head><style>body {/*background-color: pink;background-imgage: url(1.jpg);background-repeat: no-repeat;background-position: left top;background-attachment: scroll;	*/background: #000 url(#.png) no-repeat fixed center -25px;}</style></head><body><div></div></body>
</html>

五、背景透明

文字半透明:color: rgba(0,0,0,0.2);
背景半透明:background: rgba(0,0,0,0.3);

<html><head><style>body {background: #000 url(#.png) no-repeat fixed center -25px;}div {height: 400px;background: rgba(0,0,0,0.3);}</style></head><body><div></div></body>
</html>

六、背景缩放

background-size: 设置背景图片缩放

  • 设置宽高精确单位,尽量只改一个值防止缩放失真
  • 设置百分比
  • cover自动缩放占满,溢出的部分会被隐藏,使用最多
  • contain自动缩放,高宽有一个和背景一样大停止,保持图片完整性但是会有裸露部分

我们插入的图片img直接用width和height设置

<html><head><style>div {height: 400px;background: hotpink url(#.jpg) no-repeat;background-size: 100px;background-size: 50%; /*缩放为原来的一半*/background-size: cover;background-size: contain;}</style></head><body><div></div></body>
</html>

七、多背景

background: # # # #, # # #;用逗号分割设置多个背景图

  • 一个元素设置多重背景图片
  • 每组属性用逗号分隔
  • 如果存在重叠,前面的背景图会覆盖在后面的背景图上
  • 背景颜色通常定义在最后一组上
<html><head><style>div {height: 400px;background: url(#.jpg) no-repeat left top , url(##.jpg) no-repeat left hotpink;}</style></head><body><div></div></body>
</html>

八、凹凸文字

<html><head><style>body {background-color: #ccc;}div {color: #ccc;font: 700 60px "微软雅黑";}div:first-child {text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;}div:last-child {text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;}</style></head><body><div>凸起的文字</div><div>凹下的文字</div></body>
</html>

九、导航栏例子

文本装饰:text-decoration

  • none 无
  • underline 下划线,链接默认
  • overline 上划线
  • line-through 删除线
<html><head><style>a {width: 100px;height: 50px;background-color: orange;display: inline-block;text-align: center;line-height: 50px; /*行高等于盒子高度,文字居中*/color: #fff;font-size: 20px;text-decoration: none;}a:hover { /*鼠标经过*/background: url(#.png) no-repeat;}</style></head><body><a href="#">qwe</a><a href="#">asd</a></body>
</html>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com