图片的保存、显示与背景使用_网页里面图片怎么设置显示保存位置-CSDN博客

1、图片的保存

如果想保存网页中的照片，点击右键又没有“图片另存为”，按“F12”，切换到”Elements”,点击左上角箭头，再点击图片，在右边代码区域会有一个图片链接，右键，“open in new tab”,就打开了，再右键，“图片另存为”。但有些图片下载后是由若干的小图片合成的，如果想下载其中一张小图，就要用到PhotoShop了，用“切片工具”，框出来，保存ctr+alt+shift+s，所有用户“切片”
如：https://www.tencent.com/zh-cn/about.html
图片显示文字提示、加载失败提示

2、图片的显示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
         <title>百度新闻列表</title>
    </head>
    <body>
        <img src="images/fish.jpg" width="100px">
        <img src="images/eat.jpg" title="鼠标放上去时的提示" alt="图片加载失败后的提示文字">
    </body>
</html>

3、背景图的使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
         <title>背景图</title>
         <style>
             html,body{
                /*html也要设置为100%*/
                /*元素宽高的百分比是相对于父元素而言，html的大小是相对于浏览器窗口而言的*/
                margin: 0;
                /*body大小撑满整个窗口*/
                height: 100%;
             }
             body{
                background-image: url(images/background.png);
                /*当图片为repeat时，图片以平铺的方式铺满屏幕，no-repeat时就只有一个，可控制位置*/
                background-repeat:no-repeat;
                /*水平位置  竖直位置*/
                /*left,right,bottom等*/
                background-position: center center;
             }
         </style>
    </head>
    <body>
        
    </body>
</html>