css设置背景图片不重复_教育范文

问：css怎么调整背景图片的位置？

答：1、首先打开前端开发工具，新建一个html代码页面。
2、在html代码页面上创建一个用于设置背景颜色的div标签，然后给这个标签添加上class = "bg-img"。
3、设置背景图片。创建style标签，然后在标签里面对类为bg-img设置背景图片、图片不重复、宽、高的样式。
4、保存html代码，使用浏览器打开，这个时候会发现浏览器上的背景图片显示在左上角。
5、回到html代码页面，在bg-img类里添加background-position: center的属性。
6、保存html代码后重新刷新浏览器，这个时候会发现浏览器上的背景图片已经自动居中了。

问：Css设置背景图片不显示的问题

答：1、打开html开发软件，新建一个html代码页面。
2、在html代码页面的标签里面输入多行段落文字，用于后面浏览器滚动条滚动的时候查看图片时候随滚动条而滚动条。
3、设置背景图片样式。在标签后面创建一个<style>标签，然后在这个标签里设置<body>标签的背景图片，以及背景图片不重复。<br />4、保存html代码后使用浏览器打开，这个时候滚动浏览器滚动条发现背景图片是随浏览器滚动条的滚动而滚动的。<br />5、使用background-attachment: fixed设置背景图片不随滚动条而滚动。回到html代码页面，在body样式中添加上background-attachment: fixed即可。<br />6、保存html代码页面后刷新浏览器，这个时候滚动浏览器滚动条发现背景图片已经固定不随浏览器滚动而滚动了。</li></ol><h5>问：如何设置CSS网页中的背景图片不让其重复并且铺满整个屏幕，不会因为分辨率的问题而显示不出来</h5><ol><li>答：应该是background标签</li><li>答：background-image:url("背景URL");<br />background-position:50% 50%;<br />background-repeat :no-repeat;<br />background-attachment:fixed;<br />尽量大点的图。。</li><li>答：background-repeat: no-repeat; /* 不平铺 */<br />然后是铺满容器的问题，如果忽略IE内核的浏览器，用css3属性background-size: 100%;轻松解决，要兼容的话可以设一个背景层放在容器的下方，背景层里面放你的背景图片，宽高设为跟容器一样，然后把容器的背景设为透明即可。</li><li>答：只有CSS3支持这种用法。<br />background:url(ss.jpg) center no-repeat;<br />background-size:cover;<br />不过这样一来，IE9及以下版本的浏览器都不支持；<br />所以，实现兼容确实不易，另外我也见过有人使用IE的filter滤镜实现过，下面这个地址：<br />htt p://ww /strivers/ archive /2010/12/12/ 1903848. html（去掉空格）<br />这篇文章就是介绍这个的，不过这样一来，性能、兼容等都是大问题。</li><li>答：background-repeat:no-repeat;<br />background-size:cover;</li><li>答：html, body {height:100%;}<br />body { background : url(背景图片地址) no-repeat 0 0 / 100% 100%; }</li></ol> </article> <div class="article-tags"> <i class="fa fa-tags"> </i> 标签: <span class="item"> </span> </div> <div class="article-download"> <a href="#" target="_blank"> <i class="fa fa-file-word-o"> </i>点击进入下载PDF全文</a> </div> </div> <div class="relates"> <h3>相关文章</h3> <ul> </ul> </div> </div> </div> <div class="sidebar"> <div class="widget widget-textbanner"> <a class="style01" href="#" target="_blank"> <h3>软件降重一键通过</h3> <p>采用词性处理的AI智能程序设计语言，可一键通过所有查重！100%抄袭的一键降重即可100%原创！</p> </a> </div> <div class="widget widget-textbanner"> <a class="style02" href="#" target="_blank"> <h3>论文查重全网最优</h3> <p>知网、万方、维普、PaperPass、大雅等官方查重产品，价格全网最优，步骤最简。</p> </a> </div> <div class="widget widget-textbanner"> <a class="style03" href="#" target="_blank"> <h3>人工降重质量保证</h3> <p>文章人工降重，文章重复率有效降低，查重报告验证，质量保证，覆盖所有学科</p> </a> </div> <div class="widget widget-tags"> <h3 class="widget-title">热门标签</h3> <ul> <li><a href="/" title="0个话题" target="_blank" >宫颈炎</a></li> <li><a href="/" title="0个话题" target="_blank" >梨子</a></li> <li><a href="/" title="0个话题" target="_blank" >炎症</a></li> <li><a href="/" title="0个话题" target="_blank" >动词</a></li> <li><a href="/" title="0个话题" target="_blank" >进入水印对话框。在水印对话框中</a></li> <li><a href="/" title="0个话题" target="_blank" >水印</a></li> <li><a href="/" title="0个话题" target="_blank" >界面</a></li> <li><a href="/" title="0个话题" target="_blank" >资格证</a></li> <li><a href="/" title="0个话题" target="_blank" >这个软件</a></li> <li><a href="/" title="0个话题" target="_blank" >我觉得</a></li> <li><a href="/" title="0个话题" target="_blank" >安龙</a></li> <li><a href="/" title="0个话题" target="_blank" >常州</a></li> <li><a href="/" title="0个话题" target="_blank" >委托检验(送检)和查抽检验。委托检验是厂方将产品直接送去检验</a></li> <li><a href="/" title="0个话题" target="_blank" >最重要要有CMA(计量认证)、CAL(审查认可)两...2.有效的质检报告分两种</a></li> <li><a href="/" title="0个话题" target="_blank" >录取分数线</a></li> <li><a href="/" title="0个话题" target="_blank" >教师</a></li> <li><a href="/" title="0个话题" target="_blank" >航空</a></li> <li><a href="/" title="0个话题" target="_blank" >厦门</a></li> <li><a href="/" title="0个话题" target="_blank" >次数</a></li> <li><a href="/" title="0个话题" target="_blank" >您的</a></li> <li><a href="/" title="0个话题" target="_blank" >应用技术</a></li> <li><a href="/" title="0个话题" target="_blank" >编译器</a></li> <li><a href="/" title="0个话题" target="_blank" >远程教育</a></li> <li><a href="/" title="0个话题" target="_blank" >字号</a></li> <li><a href="/" title="0个话题" target="_blank" >上海财经大学</a></li> <li><a href="/" title="0个话题" target="_blank" >比如一下找不到它说一句话</a></li> <li><a href="/" title="0个话题" target="_blank" >述职报告</a></li> <li><a href="/" title="0个话题" target="_blank" >大小</a></li> <li><a href="/" title="0个话题" target="_blank" >职称评定</a></li> <li><a href="/" title="0个话题" target="_blank" >序列</a></li> <li><a href="/" title="0个话题" target="_blank" >肝脏</a></li> <li><a href="/" title="0个话题" target="_blank" >出版社</a></li> <li><a href="/" title="0个话题" target="_blank" >专著</a></li> <li><a href="/" title="0个话题" target="_blank" >课题</a></li> <li><a href="/" title="0个话题" target="_blank" >脂肪肝</a></li> <li><a href="/" title="0个话题" target="_blank" >前途</a></li> <li><a href="/" title="0个话题" target="_blank" >库克</a></li> <li><a href="/" title="0个话题" target="_blank" >媒体</a></li> <li><a href="/" title="0个话题" target="_blank" >贵人</a></li> <li><a href="/" title="0个话题" target="_blank" >伦巴</a></li> <li ><a href="/gongzuofanwen/">工作范文</a></li> <li title="教育范文" ><a href="/jiaoyufanwen/">教育范文</a></li> <li ><a href="/tiyufanwen/">体育范文</a></li> <li ><a href="/kexuefanwen/">科学范文</a></li> <li ><a href="/jianzhufanwen/">建筑范文</a></li> <li ><a href="/falufanwen/">法律范文</a></li> <li ><a href="/dianzifanwen/">电子范文</a></li> <li ><a href="/qitafanwen/">其他范文</a></li> </ul> </div> <div class="widget widget-list"> <h3 class="widget-title">猜你喜欢</h3> <ul> <li><a href="/show/1978941.html" target="_blank" title="怎么删除重复图片">怎么删除重复图片</a></li> <li><a href="/show/1978940.html" target="_blank" title="论文降重工具免费论文">论文降重工具免费论文</a></li> <li><a href="/show/1978939.html" target="_blank" title="dw背景图片不重复">dw背景图片不重复</a></li> <li><a href="/show/1978938.html" target="_blank" title="怎么设置背景图片不重复显示">怎么设置背景图片不重复显示</a></li> <li><a href="/show/1978937.html" target="_blank" title="什么软件论文排版不要钱">什么软件论文排版不要钱</a></li> <li><a href="/show/1978936.html" target="_blank" title="什么可以设置背景图片横向重复">什么可以设置背景图片横向重复</a></li> <li><a href="/show/1978935.html" target="_blank" title="商务法语论文题目">商务法语论文题目</a></li> <li><a href="/show/1978934.html" target="_blank" title="维普官网可以降重吗论文">维普官网可以降重吗论文</a></li> <li><a href="/show/1978933.html" target="_blank" title="paperyy一键降重咋样">paperyy一键降重咋样</a></li> <li><a href="/show/1978932.html" target="_blank" title="论文查重改完红色底色怎么去掉查重">论文查重改完红色底色怎么去掉查重</a></li> <li><a href="/show/1978931.html" target="_blank" title="荒野大镖客线上主线重复做">荒野大镖客线上主线重复做</a></li> <li><a href="/show/1978930.html" target="_blank" title="维普直接删除标红部分能降重吗重复">维普直接删除标红部分能降重吗重复</a></li> <li><a href="/show/1978929.html" target="_blank" title="降重技巧翻译成法语怎么说">降重技巧翻译成法语怎么说</a></li> <li><a href="/show/1978928.html" target="_blank" title="降重技巧知乎论文改重">降重技巧知乎论文改重</a></li> <li><a href="/show/1978927.html" target="_blank" title="降重有效方法万方">降重有效方法万方</a></li> <li><a href="/show/1978926.html" target="_blank" title="wps一键降重论文改重">wps一键降重论文改重</a></li> <li><a href="/show/1978925.html" target="_blank" title="翻译重复法的定义">翻译重复法的定义</a></li> <li><a href="/show/1978924.html" target="_blank" title="降重干货技巧重复率">降重干货技巧重复率</a></li> <li><a href="/show/1978923.html" target="_blank" title="降重论文的套路降重">降重论文的套路降重</a></li> <li><a href="/show/1978922.html" target="_blank" title="硕士论文第二章原理怎么降重重复">硕士论文第二章原理怎么降重重复</a></li> <li><a href="/show/1978921.html" target="_blank" title="降重的方法与技巧知乎查重">降重的方法与技巧知乎查重</a></li> <li><a href="/show/1978920.html" target="_blank" title="蜘蛛知网扩写句子">蜘蛛知网扩写句子</a></li> <li><a href="/show/1978919.html" target="_blank" title="三个降重技巧论文改重">三个降重技巧论文改重</a></li> <li><a href="/show/1978918.html" target="_blank" title="论文有效降重论文改重">论文有效降重论文改重</a></li> <li><a href="/show/1978917.html" target="_blank" title="降重技巧重复论文改重">降重技巧重复论文改重</a></li> <li><a href="/show/1978916.html" target="_blank" title="降重技巧重复率论文怎么写">降重技巧重复率论文怎么写</a></li> <li><a href="/show/1978915.html" target="_blank" title="降重技巧论文怎么写查重">降重技巧论文怎么写查重</a></li> <li><a href="/show/1978914.html" target="_blank" title="医学论文撰写与投稿技巧">医学论文撰写与投稿技巧</a></li> <li><a href="/show/1978913.html" target="_blank" title="降重论文小妙招论文">降重论文小妙招论文</a></li> <li><a href="/show/1978912.html" target="_blank" title="论文降重窍门论文">论文降重窍门论文</a></li> </ul> </div> </div> </div>   <footer class="footer"> <div class="container"> <p class="footer-link"> <a href="https://www.cnfzw.cn/" target="_blank">网站地图</a> <a href="https://www.cnfzw.cn/tag/" target="_blank">相关标签</a> <a href="https://www.cnfzw.cn/" target="_blank">最新文章</a> <a rel="nofollow" href="tencent://Message/?Uin=30044708&websiteName=https://www.cnfzw.cn/=&Menu=yes" target="_blank">联系我们</a> </p> <p>© 2010-2022 <a href="https://www.cnfzw.cn/">学术论文网</a> 保留所有权利. <a href="https://beian.miit.gov.cn" id="icp" target="_blank" rel="nofollow">苏ICP备11058636号-1</a> </p> <p class="footer-disclaimer">声明 :本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。</p> </div> </footer> <div class="fixbar-contact"> <a rel="nofollow" target="_blank" href="tencent://Message/?Uin=30044708&websiteName=https://www.cnfzw.cn/=&Menu=yes"> <i class="fa fa-qq"></i>QQ咨询</a> </div> <script type="text/javascript" src="/static/js/jquery.min.js"></script> <script type="text/javascript" src="/piccache/index.js"> <script type="text/javascript" src="/static/js/jquery.lazyload.min.js"></script> <script type="text/javascript" src="/static/js/theiastickysidebar.min.js"></script> <script type="text/javascript" src="/static/js/global.js"></script>  <div style="display:none"></div> </body> </html>