ยืดและขยายภาพ CSS ในพื้นหลัง - ด้วย CSS เท่านั้น

853

ฉันต้องการให้ภาพพื้นหลังของฉันขยายและขยายตามขนาดวิวพอร์ตของเบราว์เซอร์

ฉันเคยเห็นคำถามบางอย่างเกี่ยวกับ Stack Overflow ที่ทำงานเช่นยืดและขยายพื้นหลัง CSSตัวอย่างเช่น มันใช้งานได้ดี แต่ฉันต้องการวางภาพโดยbackgroundไม่ใช้imgแท็ก

ในimgแท็กนั้นจะถูกวางไว้และด้วย CSS เราจะส่งส่วยให้imgแท็ก

width:100%; height:100%;

ใช้งานได้ แต่คำถามนั้นเก่าไปหน่อยและระบุว่าในการปรับขนาด CSS 3 ภาพพื้นหลังจะทำงานได้ค่อนข้างดี ฉันลองตัวอย่างนี้เป็นตัวอย่างแรกแต่ไม่ได้ผลสำหรับฉัน

มีวิธีการที่ดีในการทำbackground-imageประกาศหรือไม่?

css  background 
— Fábio Antunes
แหล่งที่มา
113
ขนาดพื้นหลัง: 100% 100%;
— Andreas L.
5
บางทีการสาธิตนี้อาจเป็นประโยชน์: w3schools.com/cssref/…
— Davide
1
— Alex Angas
@AlexAngas อายุของคำถามไม่ควรเป็นปัจจัยใช่หรือไม่ สิ่งนี้ถูกถามเมื่อ 6 ปีที่แล้วและคำถามที่คุณชี้ให้เห็นถูกถามเมื่อ 4 ปีก่อน
— Fábio Antunes
@ FábioAntunes IMHO เราไม่ต้องการปิดคำถามด้วยคำตอบที่ดีที่สุดและกระตุ้นให้มีการซ้ำซ้อนเพื่อเชื่อมโยงกับคำถาม ฉันแน่ใจว่านี้จะได้รับการกล่าวถึงใน Meta แต่ฉันไม่สามารถหาได้ในขณะนี้ ...
— อเล็กซ์ Angas

คำตอบ:

1047

CSS3 มีแอตทริบิวต์ที่ดีเล็ก ๆ น้อย ๆ background-size:coverที่เรียกว่า

สิ่งนี้จะปรับขนาดภาพเพื่อให้ครอบคลุมพื้นที่พื้นหลังโดยภาพพื้นหลังทั้งหมดในขณะที่ยังคงอัตราส่วนไว้ พื้นที่ทั้งหมดจะได้รับการคุ้มครอง อย่างไรก็ตามอาจไม่สามารถมองเห็นบางส่วนของภาพได้หากความกว้าง / ความสูงของภาพที่ปรับขนาดนั้นใหญ่เกินไป

— Vashishtha Jogi
แหล่งที่มา
11
ครอบตัดภาพหากอัตราส่วนภาพไม่ตรงกันดังนั้นจึงไม่ใช่วิธีแก้ปัญหาทั่วไปที่ดี
— mahemoff
1
ในกรณีที่คุณต้องการให้มันทำงานในเบราว์เซอร์ IE - github.com/louisremi/background-size-polyfill
— Wreeecks
4
ดูเหมือนจะไม่ทำงานบน Firefox อย่างไรก็ตามbackground-size: 100vw 100vh;เคล็ดลับทำอย่างดี
— Yannick Mauray
5
@YannickMauray ลอง: background-size: cover; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover;
— Amit Kumar Khare
2
หากคุณต้องการสิ่งนี้ แต่สำหรับแกนนอนเท่านั้นให้ใช้สิ่งนี้: background-size: 100% auto; stackoverflow.com/questions/41025630/…
— antoineMoPa
470

คุณสามารถใช้คุณสมบัติ CSS3 เพื่อทำมันได้ค่อนข้างดี มันปรับขนาดเป็นอัตราส่วนจึงไม่ผิดเพี้ยนของภาพ (แม้ว่าจะเป็นภาพขนาดเล็กมาก) เพิ่งทราบว่ามันยังไม่ได้ใช้ในเบราว์เซอร์ทั้งหมด

background-size: 100%;
— Matt Burgess
แหล่งที่มา
19
@nXqd นั่นเป็นรหัสที่สมบูรณ์มาก! สร้างคอนเทนเนอร์ด้วยbackground-imageและรวมคุณสมบัติด้านบน ดังที่กล่าวไว้การสนับสนุนเบราว์เซอร์ยังไม่ดีและมีเวอร์ชันเฉพาะของเบราว์เซอร์เช่นนี้ -webkit-background-sizeเป็นต้นดูโมดูล W3C CSS3: background-sizeและcss3.info: background-size
— MrWhite
15
ในการรักษาอัตราส่วนภาพของภาพคุณควรใช้ "background-size: cover;" หรือ "ขนาดพื้นหลัง: contain;" ฉันได้สร้างโพลีฟิลล์ที่ใช้ค่าเหล่านั้นใน IE8: github.com/louisremi/background-size-polyfill
— Louis-Rémi
4
นอกจากนี้ยังแนะนำให้เพิ่มautoเพื่อรักษาอัตราส่วนภาพ
— Chibueze Opata
186

ใช้รหัสที่ฉันพูดถึง ...

HTML

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

ที่สร้างเอฟเฟกต์ที่ต้องการ: เฉพาะเนื้อหาที่จะเลื่อนไม่ใช่พื้นหลัง

ภาพพื้นหลังปรับขนาดให้กับวิวพอร์ตเบราว์เซอร์สำหรับขนาดหน้าจอใด ๆ เมื่อเนื้อหาไม่พอดีกับวิวพอร์ตของเบราว์เซอร์และผู้ใช้จำเป็นต้องเลื่อนหน้าเพจภาพพื้นหลังจะยังคงได้รับการแก้ไขในวิวพอร์ตขณะที่เลื่อนเนื้อหา

ด้วย CSS 3 ดูเหมือนว่าจะง่ายกว่านี้มาก

— Fábio Antunes
แหล่งที่มา
12
แต่นี่ไม่ใช่ภาพพื้นหลัง คุณสามารถทำสิ่งนี้กับบล็อกได้ แต่ไม่สามารถใช้องค์ประกอบอินไลน์เช่นอินพุต [type = text] หรือฉันผิด
— Deerchao
11
ไม่จำเป็นต้องใช้ class = "stretch" เพียงใช้ #background img {} เป็นตัวระบุใน css
— BerggreenDK
ดัชนี z: -1; เก็บภาพของคุณในพื้นหลัง หากคุณต้องการที่จะแสดงภาพของคุณในเบื้องหน้าคุณสามารถเพิ่มค่าดัชนี z หรือลบดัชนีนั้น
— gokhanakkurt
ปัญหาที่ฉันมีกับ IE8 ภาพพื้นหลังของ DIV ยืดเต็ม แต่ใน IE8 ภาพจะออกไปนอก DIV ดังนั้นจึงไม่สามารถดูภาพเต็มได้ มันถูกครอบตัดออก นี่คือคำถามของฉัน: stackoverflow.com/questions/22331179/ …
— Si8
1
ความผิดพลาดที่ชัดเจนที่ผู้คนทำคือการใส่ภาพพื้นหลังใน css (เช่นโดยbackground : url("example.png");) จากนั้นใช้แอตทริบิวต์ css ที่background-size:100%;อยู่ด้านล่างเพื่อหวังว่าจะปรับขนาดภาพเป็นความกว้างของหน้าจอ มันจะไม่ทำงานใช่ไหม <body background="example.png">หากคุณต้องการที่จะนำภาพพื้นหลังสำหรับร่างกายแล้วแอตทริบิวต์ภาพควรจะเพิ่มแท็กร่างกายเช่น จากนั้นใช้ css background-size:100%;เพื่อขยาย
— sjsam
166

CSS:

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}
— Josh Crozier
แหล่งที่มา
อย่างไรก็ตามวิธีนี้ใช้ไม่ได้ใน IE8 มันสร้างมาร์จิ้นที่ด้านบนและด้านล่างของหน้าต่าง
— erdomester
บน Android มันทำงานเมื่อใช้แทนhtml, body {...} body {...}
— Edward
53 
background-size: 100% 100%;

เหยียดพื้นหลังเพื่อเติมองค์ประกอบทั้งหมดในแกนทั้งสอง

— yeahdixon
แหล่งที่มา
40

ส่วน CSS ต่อไปนี้ควรขยายภาพด้วยเบราว์เซอร์ทั้งหมด

ฉันทำสิ่งนี้แบบไดนามิกสำหรับแต่ละหน้า ดังนั้นฉันใช้ PHP เพื่อสร้างแท็ก HTML ของตัวเองสำหรับแต่ละหน้า รูปภาพทั้งหมดอยู่ในโฟลเดอร์ 'image' และลงท้ายด้วย 'Bg.jpg'

<html style="
      background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

หากคุณมีรูปภาพพื้นหลังเพียงภาพเดียวสำหรับทุกหน้าคุณสามารถลบ$picตัวแปรออกได้ลบการหลบหลีกสแลชปรับพา ธ และวางรหัสนี้ในไฟล์ CSS ของคุณ

html{
    background: url(images/homeBg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}

สิ่งนี้ได้รับการทดสอบกับ Internet Explorer 9, Chrome 21 และ Firefox 14

— Thorsten Niehues
แหล่งที่มา
2
ตัวอย่างของคุณใช้งานไม่ได้กับความเข้ากันได้แบบย้อนหลังเนื่องจากคุณลืมคำนำหน้า '-' ของคำนำหน้าผู้ขาย มันจะต้องเป็น-webkit-background-size, -moz-background-sizeและอื่น ๆ ดูdeveloper.mozilla.org/en-US/docs/CSS/ … หรือคุณอาจจะรวมมันไว้เป็นหลักฐานในอนาคตในคุณสมบัติจดชวเลขเช่นbackground: url(img/bg-home.jpg) no-repeat center center / cover fixed;
— Volker E.
นี่เป็นทางออกเดียวที่จะทำงานกับฉันใน IE9 ขอบคุณ
— robnick
17

คุณสามารถบรรลุผลเช่นเดียวกับภาพพื้นหลังด้วยแท็ก img คุณต้องตั้งค่าดัชนี z ของมันให้ต่ำกว่าทุกอย่างตั้งค่าตำแหน่ง: สัมบูรณ์และใช้พื้นหลังโปร่งใสสำหรับทุกช่องในเบื้องหน้า

— Kim Stebel
แหล่งที่มา
นั่นคือสิ่งที่ฉันเห็นในคำถาม SO อื่น ๆ และได้ผล แต่ตั้งแต่ CSS3 ออกมาฉันคิดว่าตอนนี้เป็นวิธีที่ดีกว่า
— Fábio Antunes
3
อาจจะมีและคำนึงถึงการพัฒนาบัญชีในการใช้เบราว์เซอร์คุณอาจจะสามารถใช้พวกเขาในเชิงพาณิชย์ในเพียง ... 10 ปี?
— Kim Stebel
เป็น CSS3 ไม่มีอะไรผิดปกติกับการใช้พร็อพเพอร์ตี้ที่เบราว์เซอร์ที่ทันสมัยที่สุดเห็นและให้มาตรฐานขั้นต่ำสำหรับเบราว์เซอร์ที่ไม่รองรับ ตัวอย่างเช่นที่นี่คุณอาจใช้พื้นหลังกระเบื้องที่น่าเบื่อ แต่เป็นที่ยอมรับสำหรับ <IE8 และรูปภาพน่ารักสำหรับ Firefox / Chrome / Safari / Opera นอกจากนี้ยังมี polyfills จำนวนมากเพื่อจำลองการทำงานของ CSS3 ในเบราว์เซอร์รุ่นเก่าด้วย JavaScript กล่าวอีกนัยหนึ่งคุณไม่จำเป็นต้องรอให้เบราว์เซอร์ทุกตัวรองรับ CSS3 เพื่อใช้งาน
— Dan Blows
เพิ่งพบโพสต์อื่นซึ่งอ้างอิงการใช้ MS AlphaImageLoader ที่เป็นกรรมสิทธิ์: stackoverflow.com/questions/2991623/…
— uglymunky
15

มันอธิบายได้ด้วยเทคนิค CSS: ภาพพื้นหลังเต็มหน้าแบบสมบูรณ์

การสาธิต: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

รหัส:

body {
  background: url(images/myBackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
— Aamer Shahzad
แหล่งที่มา
จากคำตอบข้างต้นฉันได้เห็นการแก้ไขการแนบพื้นหลังไม่สามารถใช้งานได้บนอุปกรณ์พกพาและขอบไมโครซอฟท์ โซลูชั่นที่สมบูรณ์แบบที่จะทำให้การขยายพื้นหลังและแก้ไขบนอุปกรณ์และเบราว์เซอร์ทั้งหมดฉันขอแนะนำjquery-backstretch.com
— Aamer Shahzad
15

คุณสามารถเพิ่มคลาสนี้ลงในไฟล์ CSS ของคุณ

.stretch {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

มันทำงานได้ใน:

  • Safari 3 หรือใหม่กว่า
  • Chrome หรืออะไรก็ตาม
  • Internet Explorer 9หรือใหม่กว่า
  • Opera 10 หรือใหม่กว่า (รองรับ Opera 9.5background-sizeแต่ไม่ใช่คำหลัก)
  • Firefox 3.6 หรือใหม่กว่า (Firefox 4 รองรับเวอร์ชันนำหน้าที่ไม่ใช่ผู้ขาย)
— อรุณราชส
แหล่งที่มา
นี่คือคำตอบ "ยืดให้พอดี" ที่ใช้งานได้ หมายเหตุ: อัตราส่วนภาพจะเปลี่ยนไป
— devdrc
10

ในการปรับขนาดภาพของคุณให้เหมาะสมตามขนาดของภาชนะให้ใช้สิ่งต่อไปนี้:

background-size: contain;
background-repeat: no-repeat;
— justinpees
แหล่งที่มา
9

ฉันใช้สิ่งนี้และใช้ได้กับเบราว์เซอร์ทั้งหมด:

<html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
            html, body {height:100%; margin:0; padding:0;}

            /* Set the position and dimensions of the background image. */
            #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

            /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
            #content {position:relative; z-index:1; padding:10px;}
        </style>
        <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>
— มาห์ jokar
แหล่งที่มา
9

ขอบคุณ!

แต่แล้วมันก็ไม่ได้ทำงานกับเบราว์เซอร์Google ChromeและSafari (ยืดได้ แต่รูปภาพสูงเพียง 2 มม.)จนกระทั่งมีคนบอกฉันว่ามีอะไรขาด:

ลองตั้งค่า height:auto;min-height:100%;

ดังนั้นเปลี่ยนที่สำหรับheight:100%;สายของคุณให้:

#### #background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    width:100%;
    height:auto;
    min-height:100%;
}

ก่อนหน้านี้ที่เพิ่งเพิ่มรหัสฉันมีสิ่งนี้ในธีมDrupal Tenduของฉันstyle.css:

html, body {height: 100%;}

#page {พื้นหลัง: #ffffff; ความสูง: อัตโนมัติ! สำคัญ; ความสูง: 100%; ความสูงต่ำสุด: 100%; ตำแหน่ง: ญาติ;}

จากนั้นฉันต้องสร้างบล็อกใหม่ภายใน Drupal ด้วยรูปภาพขณะที่เพิ่มclass=stretch:

<img alt = "" class = "stretch" src = "pic.url" />

เพียงแค่คัดลอกรูปภาพด้วยเครื่องมือแก้ไขในบล็อก Drupal นั้นใช้งานไม่ได้ มีการเปลี่ยนแปลงแก้ไขเป็นข้อความที่ไม่ได้จัดรูปแบบ

— Cybr
แหล่งที่มา
8

ฉันเห็นด้วยกับภาพใน div แน่นอนที่มีความกว้างและความสูง 100% ตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่าความกว้างและความสูง 100% สำหรับร่างกายใน CSS และกำหนดระยะขอบและระยะห่างจากศูนย์ ปัญหาอื่นที่คุณจะพบกับวิธีนี้คือเมื่อเลือกข้อความพื้นที่การเลือกบางครั้งสามารถรวมภาพพื้นหลังซึ่งมีผลที่โชคร้ายในการทำให้หน้าเต็มมีสถานะที่เลือก คุณสามารถปัดเศษสิ่งนี้ได้โดยใช้user-select:noneกฎ CSS ดังนี้:

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

อีกครั้ง Internet Explorer เป็นคนไม่ดีที่นี่เพราะมันไม่รู้จักตัวเลือกที่ผู้ใช้เลือก - แม้จะไม่มีการแสดงตัวอย่างของInternet Explorer 10ดังนั้นคุณจึงมีตัวเลือกในการใช้ JavaScript เพื่อป้องกันการเลือกภาพพื้นหลัง (เช่นhttp : //www.felgall.com/jstip35.htm ) หรือใช้วิธีการขยายพื้นหลังCSS 3

นอกจากนี้สำหรับSEOฉันจะวางภาพพื้นหลังที่ด้านล่างของหน้า แต่ถ้าภาพพื้นหลังใช้เวลาในการโหลดนานเกินไป (นั่นคือเมื่อมีพื้นหลังสีขาวเริ่มแรก) คุณสามารถเลื่อนไปที่ด้านบนของหน้า

— Myke Black
แหล่งที่มา
ถ้า
— งั้น
7

ฉันต้องการจัดกึ่งกลางและขยายภาพพื้นหลังโดยไม่ขยายไปที่หน้าทั้งหมดและฉันต้องการรักษาอัตราส่วนภาพไว้ สิ่งนี้ใช้ได้กับฉันด้วยความหลากหลายที่แนะนำในคำตอบอื่น ๆ :

รูปภาพแบบอินไลน์: ------------------------

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS ----------------------------------

html {
    height:100%;
}

#background {
    text-align: center;
    width: 100%; 
    height: 100%; 
    position: fixed;
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    margin: auto;
    height:100%;
}
— AnnieDee
แหล่งที่มา
5

ฉันใช้การผสมผสานของคุณสมบัติ background-X CSS เพื่อให้ได้ภาพพื้นหลังที่เหมาะ

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

สิ่งนี้ทำให้พื้นหลังครอบคลุมหน้าต่างเบราว์เซอร์ทั้งหมดและยังคงอยู่กึ่งกลางเมื่อปรับขนาด

— Ryan Den-Kaat
แหล่งที่มา
4

ใช้ปลั๊กอินBackstretch หนึ่งอาจมีภาพนิ่งหลายภาพ มันยังทำงานในภาชนะ ตัวอย่างเช่นวิธีนี้อาจมีเพียงส่วนหนึ่งของพื้นหลังที่ถูกปกคลุมด้วยภาพพื้นหลัง

แม้กระทั่งฉันสามารถใช้งานได้พิสูจน์ให้เป็นปลั๊กอินที่ใช้งานง่าย :)

— แดเนียล
แหล่งที่มา
3

หากคุณต้องการให้เนื้อหาอยู่กึ่งกลางแนวนอนให้ใช้ชุดค่าผสมดังนี้:

background-repeat: no-repeat;
background-size: cover;
background-position: center;

สิ่งนี้จะดูสวยงาม

— ซามูเอล Ramzan
แหล่งที่มา
2

ใช้ CSS นี้:

background-size: 100% 100%

— Shady Sherif
แหล่งที่มา
Downwoted นี่เป็นคำซ้ำซ้อนของคำตอบก่อนหน้าstackoverflow.com/a/35021247/3810453
— Zanshin13
1
@ Zanshin13 ฉันไม่รู้เกี่ยวกับคำถามก่อนหน้านี้ ถ้าอย่างนั้นคุณจะต้องโหวตให้ปิดคำถามโดยไม่ต้องลงคะแนนคำตอบของฉัน!
— Shady Sherif
1

คุณสามารถใช้border-image : yourimageคุณสมบัตินี้เพื่อขยายภาพจนถึงขอบ แม้ว่าคุณจะให้ภาพพื้นหลังภาพเส้นขอบก็จะถูกวาดลงบนมัน

border-imageคุณสมบัติเป็นประโยชน์อย่างมากถ้าแผ่นสไตล์ของคุณจะดำเนินการใดที่หนึ่งซึ่งไม่สนับสนุน CSS 3. หากคุณกำลังใช้ Google Chrome หรือ Firefox แล้วผมขอแนะนำbackground-size:coverสถานที่ให้บริการตัวเอง

— Natesh bhat
แหล่งที่มา
0

คุณต้องการที่จะบรรลุสิ่งนี้เพียงแค่ใช้หนึ่งภาพ? เพราะจริง ๆ แล้วคุณสามารถสร้างความคล้ายคลึงกับพื้นหลังที่ยืดได้โดยใช้สองภาพ เช่นภาพPNG

ฉันเคยทำมาก่อนและก็ไม่ยาก นอกจากนี้ฉันคิดว่าการยืดออกก็จะส่งผลเสียต่อคุณภาพของพื้นหลัง และถ้าคุณเพิ่มรูปภาพขนาดใหญ่มันจะทำให้คอมพิวเตอร์และเบราว์เซอร์ช้าลง

— MarioRicalde
แหล่งที่มา
จุดดี. แต่ฉันใช้ jpg สำหรับภาพพื้นหลัง shes ประมาณ 1500x1000 ใช้เวลาน้อยกว่า 100kb แต่คุณจะทำอย่างไร
— Fábio Antunes
1
แล้วการจัดกึ่งกลางของภาพในแนวนอนและทำให้ขอบภาพอ่อนลงด้วยสีทึบหรือลวดลาย? สิ่งนี้จะช่วยให้คุณปรับตัวได้อย่างไร้รอยต่อหากผู้ใช้มีความละเอียดมากกว่าภาพ
— MarioRicalde
แต่ฉันต้องการให้ภาพเต็มพื้นหลัง คนที่คุณพูดนั่นเป็นสิ่งที่ฉันมักจะทำ
— Fábio Antunes
0

ต่อไปนี้ใช้งานได้สำหรับฉัน

.back-ground {
   background-image: url("../assets/background.png");
   background-size: 100vw 100vh;
}

ที่ทำงานเพื่อครอบคลุมพื้นหลังทั้งหมดในมิติที่แตกต่างกัน

— tony2tones
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.