全宽/拉伸网站背景图片

时间：2018-11-13 22:04:30

标签： javascript html css

如何获取网站背景图片，该图片应为全角/拉伸，侧面和顶部都没有空格。我不知道它是HTML，CSS还是Javascript。

click here for an example of what i would like

这是我的CSS代码：

cvx_begin
variable U(l,N)
U >= 0
ones(l,N)'*U == ones(N,N)';
minimize (trace(D'*U)+ lambda*norm(U, inf)+ gamma*trace(U*L*U')) ;
cvx_end

4 个答案:

答案 0 :(得分：0)

html, body { height: 100%; }

body { 
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-image: url(your-img-url);
}

就这样

答案 1 :(得分：0)

尝试这个

body {
    background-image: url(https://dummyimage.com/250/ffffff/000000);
    background-size: cover;
  }

答案 2 :(得分：0)

执行此操作的方法有很多，实际上，这完全取决于开发人员。

此代码可能会对您有所帮助。 

section {
  position: absolute;
  top: 0,
  left:0;
  bottom: 0;
  right: 0;
  height: 100%;
  background-repeat: no-repeat;
  background: #0e0e0e;
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  width: 50%;
  object-fit: contain;
}
<section><img src="https://i.stack.imgur.com/A2e0s.png" /></section>

答案 3 :(得分：0)

您可以根据需要使用HTML，CSS或Javascript。每种编程语言都有其自身的优点和缺点：

HTML

优点：：纯HTML方法是插入图像的最简单，最直接的方法。 HTML方式也是最快且最有利于页面加载速度的方式，因为由于您是事先告知浏览器图像的尺寸，因此浏览器能够比完成加载页面时更快地向用户展示页面。图片。

缺点：：纯HTML方法的响应速度最快，可定制性最低，可扩展性最低。您必须分别微管理每个图像。

方法：请按照以下步骤操作。

  1. 创建图像标签。
  2. （可选）将此图像标签的decoding属性设置为async，以防止图像加载阻止页面加载速度。
  3. 将width属性设置为像素数或包含初始字母的周围框的百分比（超高级概念，请不要担心！）。
  4. 将height属性设置为像素数或包含初始字母的周围框的百分比（超高级概念，请不要担心！）。
  5. 设置alt和src属性。

工作示例：

48% X 48%:<br />
<img width="48%" height="48%" src="https://target.scene7.com/is/image/Target/GUEST_129e9184-f7fd-4a07-b455-a49df70c7c99?wid=488&hei=488&fmt=pjpeg" alt="Big brand &quot;California&quot; rasins" decoding="async" />
<br />488px X 488px (original size, reccomended):<br />
<img width="488" height="488" src="https://target.scene7.com/is/image/Target/GUEST_129e9184-f7fd-4a07-b455-a49df70c7c99?wid=488&hei=488&fmt=pjpeg" alt="Big brand &quot;California&quot; rasins" decoding="async" />
<br />48px X 48px:<br />
<img width="48" height="48" src="https://target.scene7.com/is/image/Target/GUEST_129e9184-f7fd-4a07-b455-a49df70c7c99?wid=488&hei=488&fmt=pjpeg" alt="Big brand &quot;California&quot; rasins" decoding="async" />

CSS

专业版：比HTML方式更具自由度和可表达性。使用CSS，除了设置首选方式之外，您还可以设置最小和最大大小的约束。您还可以根据字体大小缩放图像，以使其在所有设备上看起来都不错，并将其缩放到屏幕大小，然后使用calc创建复杂的计算

缺点：与HTML一样缺乏可扩展性。

方法：

html, body, #bloat {
  width: calc(22vh + 22vw + 1em + 8px);
  height: calc(48vh + 48vw - 2em - 1px);
  margin-left: 1em;
  transform: rotateX(-20deg) rotateY(-9deg) rotateZ(-2deg);
  perspective: 100vw;
}
<img src="https://i.pinimg.com/originals/d8/ba/c5/d8bac51eebcaea95eb6eeee1d6f01885.jpg" id="bloat" alt="What?"/>

Javascript

专业版：：您可以在计算中使用图像的原始尺寸。这是一个主要优点，因为它允许创建高度可扩展的Web设计。

缺点：与HTML或CSS相比，这是一种速度更慢且页面阻塞的方式。对于不知道如何编写Java脚本的人来说，尤其是这样，因为Java脚本前所未有地容易被滥用，因此他们只是复制javascript代码片段以将其粘贴到整个网站上。但是，不要气be：在正确的用法和正确的用法下，javascript会非常强大。

方法：由于您要提问的性质，我假设您不知道javascript。好吧，我可以解决这个问题。模板HTML代码如下。以下代码应与IE6 +兼容。但是，页面的其余部分很可能与IE6不兼容。

delete eval; delete Proxy; // exorcise JS evil and redeem performance's soul!
(function(){
    "use strict";
    var images = document.images || document.getElementsByTagName("img");
    var ddEle = document.documentElement;
    /*****************************/
    /** [Place Piece-1 Extensions Here] **/
    /*****************************/
    function whenResize(){
        /*****************************/
        /** [Place Piece-2 Extensions Here] **/
        /*****************************/
        for (var i=0,Len=images.length; i < Len; ++i) {
            var theImage = images[i];
            /*****************************/
            /** [Place Piece-3 Extensions Here] **/
            /*****************************/
            theImage.width = /*Insert equation:*/ 1 + 1;
            theImage.height = /*Insert equation:*/ 1 * 1;
        }
    }
    if (document.readyState !== "interactive") {
        whenResize();
    } else if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", whenResize, {once: 1});
    } else {
        document.attachEvent("onreadystatechange", function onReady(){
            document.detachEvent("onreadystatechange", onReady);
            whenResize();
        });
    }
    if (typeof addEventListener !== "undefined")
        addEventListener("resize", whenResize, {passive: 1});
    else
        attachEvent("onresize", whenResize); // old IE
})();

扩展名在下面列出。请仅按需使用它们，以确保获得最佳性能。

  • 字体大小扩展
    • 为用户提供字体大小作为变量deviceFontSize。请注意，在某些设备上，字体大小会随着用户访问页面的过程而改变。但是，不幸的是，目前还没有很好的解决方案来处理这些设备。处理这些设备的最简单方法（如果绝对需要）是将以下“ Piece-2”代码的位置替换为“ Piece-1”代码。
    • 第1部分代码：var deviceFontSize = parseFloat((ddEle.currentStyle || getComputedStyle(ddEle, null)).fontSize);
    • Piece-2代码：[无]
    • Piece-3代码：[无]
  • 窗口大小扩展
    • 将用户屏幕的大小作为变量deviceWidth和deviceFontSize
    • Piece-1代码：[无]
    • Piece-2代码：var deviceWidth=window.innerWidth, deviceHeight=window.innerHeight; if (deviceWidth === undefined) deviceWidth = ddEle.offsetWidth, deviceHeight = ddEle.offsetHeight;
    • Piece-3代码：[无]
  • 自然图像尺寸
    • 每个图像文件都保存为X像素乘以Y像素。该扩展名获取原始图像文件的尺寸作为变量naturalWidth和naturalHeight。如果无法获取这些值，则默认为0。
    • Piece-2代码：[无]
    • Piece-2代码：[无]
    • Piece-3代码：var naturalWidth = theImage.naturalWidth | 0, naturalHeight = theImage.naturalHeight | 0;
  • 数学扩展
    • 请参见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math
    • 现在，为了确保速度，请从数学方法中删除Math.，并为每个使用的方法仅插入一次以下代码（而不是每次使用该方法一次）。例如，如果您使用过 Math.abs 三次，则段码为var abs=Math.abs;。如果您使用过 Math.pow 一次和 Math.log 4次，那么您的1段代码将是var pow=Math.pow;var log=Math.log;。插入这些扩展名后，通常不用Math.就可以使用math函数。例如，您可以将Math.max与 Window Size扩展名一起使用，并将图像的宽度设置为max(deviceWidth, deviceHeight)，以获取屏幕的最大宽度和高度。
    • Piece-1代码：var（在此处输入数学函数的名称。如果需要 Math.cos ，则放上cos）= Math.（还要在此处输入数学函数的名称。如果要 Math.cos ）cos
      • ，请放;
    • Piece-2代码：[无]
    • Piece-3代码：[无]

示例：

delete eval; delete Proxy; // exorcise JS evil and redeem performance's soul!
(function(){
    "use strict";
    var images = document.images || document.getElementsByTagName("img");
    var ddEle = document.documentElement;
    /*****************************/
    /** [Place Piece-1 Extensions Here] **/
    // The Font Size extension
    var deviceFontSize = parseFloat((ddEle.currentStyle || getComputedStyle(ddEle, null)).fontSize);
    // Math functions:
    var max = Math.max;var min = Math.min;
    /*****************************/
    function whenResize(){
        /*****************************/
        /** [Place Piece-2 Extensions Here] **/
        // the device width extension:
        var deviceWidth=window.innerWidth, deviceHeight=window.innerHeight; if (deviceWidth === undefined) deviceWidth = ddEle.offsetWidth, deviceHeight = ddEle.offsetHeight;
        /*****************************/
        for (var i=0,Len=images.length; i < Len; ++i) {
            var theImage = images[i];
            /*****************************/
            /** [Place Piece-3 Extensions Here] **/
            // The natural size extension:
            var naturalWidth = theImage.naturalWidth | 0, naturalHeight = theImage.naturalHeight | 0;
            /*****************************/
            theImage.width = (deviceWidth * 30/100 + 15*deviceFontSize + naturalWidth * 2) / min(max(naturalWidth, 1), 3);
            theImage.height = (deviceHeight * 210/100 - 3*deviceFontSize + naturalHeight * 2) / min(max(naturalHeight, 1), 3);
        }
    }
    if (document.readyState !== "loading") {
        whenResize();
    } else if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", whenResize, {once: 1});
    } else {
        document.attachEvent("onreadystatechange", function onReady(){
            document.detachEvent("onreadystatechange", onReady);
            whenResize();
        });
    }
    if (typeof addEventListener !== "undefined")
        addEventListener("resize", whenResize, {passive: 1});
    else
        attachEvent("onresize", whenResize); // old IE
})();
<img src="https://s1.nyt.com/timesmachine/pages/1/1993/10/20/766893_360W.png" alt="Medical Article In Foreign Language" />

相关问题
最新问题