css 如何把两个图片(背景)分别过定在右上角和右下角
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 如何把两个图片(背景)分别过定在右上角和右下角相关的知识,希望对你有一定的参考价值。
我有两张图片,想用来做背景,想的上一张放在右上角,另一张固定在右下角产生水印效果..如何实现..我是新手...多指教!
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<style>标签中,输入css代码:
<img style="position: absolute;right: 0;top:0;" src="small2.png" />
<img style="position: absolute;right: 0;bottom:0;" src="small3.png" />
3、浏览器运行index.html页面,此时一张图片被固定右上角,另一张图片被固定右下角。
参考技术A把图片(背景)定在右上角css样式如下:
<div style="background:url(160840259.jpg) no-repeat right top;width:1000px;height:280px;border:1px #333 solid;"></div>把图片(背景)定在右下角css样式如下:
<div style="background: url(160840259.jpg) no-repeat right bottom;width:1000px;height:280px;border:1px #333 solid;"></div>效果如下
为了区分,在div层中设置了边框颜色。
起决定作用的代码是:
background:url(160840259.jpg) no-repeat right top;如果要靠左上代码如下:
background:url(160840259.jpg) no-repeat left top;如果要靠左下代码如下:
.bg1 background: url(1.gif) no-repeat right top
.bg2 background: url(2.gif) no-repeat right bottom
这样就搞定了第一个是右上角,第二个是右下角本回答被提问者采纳 参考技术C .bg1
background-attachment: fixed;
background-image: url(1.gif);
background-repeat: no-repeat;
background-position: right top;
.bg2
background-attachment: fixed;
background-image: url(2.gif);
background-repeat: no-repeat;
background-position: left bottom;
css 如何把背景图占满整个屏幕
参考技术Abackground: url(../images/login/theme4.jpg) center center no-repeat;
background-attachment: fixed;
background-size: cover;
background-size: 100%; background-size的属性可以调整试试cover,100%等
以上是关于css 如何把两个图片(背景)分别过定在右上角和右下角的主要内容,如果未能解决你的问题,请参考以下文章