css设置背景图片大小自适应_css设置整个页面背景图片

css设置背景图片大小自适应_css设置整个页面背景图片background:pink;图片在背景图上面background-image:url(food.jpg);一张图片铺满一行background-repeat:repeat-x;同一张图片多张铺满

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

background:pink;图片在背景图上面

background-image:url(food.jpg);一张图片铺满一行
background-repeat:repeat-x;同一张图片多张铺满横向

background-repeat:repeat-y;同一张图片多张铺满纵向

background-repeat:no-repeat;只在左上角显示一张按图片原来的大小显示

background-attachment:fixed;把图片固定在某处,图片不随着滚动条的滚动上下移动

 background-position:center;图片位置居中

css设置背景图片大小自适应_css设置整个页面背景图片

<style>
#test1{
 background:pink;
 background-image:url(food.jpg);
 height:493px;
 background-repeat:no-repeat;
 background-attachment:fixed;
 background-position:center;
}
</style>
</head>
<body>
<p id=”test1″>人生总有许多偶然和巧合,两条平行线,也可能会有交汇的一天。
人生又有许多意外和错过,握在手里的风筝,也会突然断了线……。 </p>
</body>

精确控制图片显示位置:

background-position:center  enter;

css设置背景图片大小自适应_css设置整个页面背景图片

<style>
#test1{
 width:500px;
 height:400px;
 background-image:url(food.jpg);
 background-repeat:no-repeat;
 background-position:center center;
}
</style>
</head>
<body>
<div id=”test1″></div>

</body>

用精确的像素来确定位置:

css设置背景图片大小自适应_css设置整个页面背景图片

<style>
#test1{
 width:500px;
 height:400px;
 background-image:url(food.jpg);
 background-repeat:no-repeat;
 background-position:center center;
}
#test2{
 width:50px;
 height:30px;
 background-image:url(food1.jpg);
 background-position:-150px -500px;
}
<style>
</head>
<body>
<div id=”test1″></div>
<div id=”test2″></div>
</body>

把所有的代码写在一行里的顺序

css设置背景图片大小自适应_css设置整个页面背景图片

后面是具体像素,显示图片上你需要的某部分,即用一张图做多个元素的背景,调整需要部分它的位置即可

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/167098.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • http_build_query()函数使用方法

    http_build_query()函数使用方法

  • WPF 布局控件 之 WrapPanel[通俗易懂]

    WPF 布局控件 之 WrapPanel[通俗易懂]StatickPanel就是将子元素按照堆栈的形式一一排列,通过设置面板的Orientation属性设置了两种排列方式:横排(Horizontal默认的)和竖排(Vertical)。纵向的StatickPanel默认每个元素宽度与面板一样宽,反之横向亦然。如果包含的元素超过了面板空间,它只会截断多出的内容。元素的Margin属性用于使元素之间

  • macpro录屏快捷键_mac屏幕录制设置

    macpro录屏快捷键_mac屏幕录制设置在视频内容越来越丰富的今天,录屏是我们经常会用到的一个功能,不管是录制一些无法下载的视频还是录制屏幕制作自己的视频,都需要用到录屏功能,本文中我们来推荐几款好用的Mac录屏软件Mac系统自带的录屏工具虽然我们可能天天都在使用Mac系统,但是可能很多人都不知道,其实Mac已经自带了一个好用的截图和录屏工具,你可以随时使用Command+Shift+5快捷键调出Mac自带的录屏功…

  • JAVA中的数组插入与删除指定元素

    JAVA中的数组插入与删除指定元素今天学了Java的数组,写了数组的插入和删除,本人小白,写给不会的小白看,大神请忽略,有错请大家指出来;/**给数组指定位置数组的插入*/importjava.util.*;publicclassArrayInsert{publicstaticvoidmain(String[]args){System.out.println(“请用键

  • jediscluster api_java.lang.throwable

    jediscluster api_java.lang.throwable由于redis的集群rediscluster不支持keys这样的多key操作(具体原因由于sharding后,不同的key属于不同的slot,难以支持原子操作)。所以如果一个对外需要对缓存做失效处理时比较棘手。所以本类提供工具方法再rediscluster查找按照hashTags处理的keys和一般的keys。基于jediscluster实现。有优化空间,现在懒得改了importjav…

    2022年10月14日
  • 卸载Symantec Endpoint Protection, 无需password的卸载方法

    卸载Symantec Endpoint Protection, 无需password的卸载方法

    2021年12月10日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号