පසුබිම තුළ CSS රූපයක් දිගු කර පරිමාණය කරන්න - CSS සමඟ පමණි

Question 1

බ්‍රව්සර් දර්ශනපත්‍රයේ ප්‍රමාණය අනුව මගේ පසුබිම් රූපය දිගු කර පරිමාණය කිරීමට මට අවශ්‍යය.

නිදසුනක් ලෙස ස්ට්‍රෙච් සහ පරිමාණ CSS පසුබිම වැනි කාර්යය කරන ස්ටැක් පිටාර ගැලීම් පිළිබඳ ප්‍රශ්න කිහිපයක් මම දැක ඇත්තෙමි . එය හොඳින් ක්‍රියාත්මක වේ, නමුත් මට අවශ්‍ය වන්නේ ටැගය backgroundසමඟ නොව රූපය භාවිතා කිරීමයි img.

එහි එක් imgටැගයක් තබා ඇති අතර, පසුව CSS සමඟ අපි ටැගයට උපහාර දක්වමු img.

width:100%; height:100%;

එය ක්‍රියාත්මක වන නමුත් එම ප්‍රශ්නය ටිකක් පැරණි වන අතර CSS 3 හි පසුබිම් රූපයක් ප්‍රතිප්‍රමාණනය කිරීම ඉතා හොඳින් ක්‍රියාත්මක වන බව සඳහන් කරයි. මම මෙම උදාහරණය පළමුවැන්න අත්හදා බැලුවෙමි , නමුත් එය මට සාර්ථක වූයේ නැත.

background-imageප්රකාශය සමඟ එය කිරීමට හොඳ ක්රමයක් තිබේද?

Question 2

CSS3 සතුව ලස්සන කුඩා ලක්ෂණයක් background-size:coverඇත.

දර්ශන අනුපාතය පවත්වා ගනිමින් පසුබිම් ප්‍රදේශය පසුබිම් රූපයෙන් සම්පූර්ණයෙන්ම ආවරණය වන පරිදි මෙය රූපය පරිමාණය කරයි. මුළු ප්රදේශයම ආවරණය වනු ඇත. කෙසේ වෙතත්, ප්‍රමාණය වෙනස් කළ රූපයේ පළල / උස විශාල නම් රූපයේ කොටසක් නොපෙනේ.

Question 3

ඔබට CSS3 දේපල භාවිතා කර එය ඉතා හොඳින් කළ හැකිය. එය අනුපාතයට වෙනස් වන බැවින් රූප විකෘති කිරීමක් සිදු නොවේ (එය කුඩා රූප ඉහළ මට්ටමක පැවතුනද). මතක තබා ගන්න, එය තවමත් සියලුම බ්‍රව්සර්වල ක්‍රියාත්මක වී නොමැත.

background-size: 100%;

Question 4

මා සඳහන් කළ කේතය භාවිතා කරමින් ...

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%;
}

එමඟින් අපේක්ෂිත ප්‍රති produce ලය ලැබේ: පසුබිම නොව අන්තර්ගතය පමණක් අනුචලනය වේ.

පසුබිම් රූපය ඕනෑම තිර ප්‍රමාණයක් සඳහා බ්‍රව්සර් දර්ශනපත්‍රයේ ප්‍රමාණයට වෙනස් වේ. අන්තර්ගතය බ්‍රව්සර් දර්ශනපථයට නොගැලපෙන විට සහ පරිශීලකයාට පිටුව අනුචලනය කිරීමට අවශ්‍ය වූ විට, අන්තර්ගතය අනුචලනය වන අතරතුර පසුබිම් රූපය දර්ශනපත්‍රයේ ස්ථාවරව පවතී.

CSS 3 සමඟ මෙය බොහෝ පහසු වනු ඇති බව පෙනේ.

Question 5

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*/
}

Question 6

background-size: 100% 100%;

අක්ෂ දෙකෙහිම සම්පූර්ණ අංගය පිරවීම සඳහා පසුබිම දිගු කරයි.

Question 7

පහත දැක්වෙන CSS කොටස සියලුම බ්‍රව්සර් සමඟ රූපය දිගු කළ යුතුය.

සෑම පිටුවකටම මම මෙය ගතිකව කරමි. එබැවින් සෑම පිටුවකටම තමන්ගේම HTML ටැගයක් ජනනය කිරීමට මම PHP භාවිතා කරමි. සියලුම පින්තූර 'රූප' ෆෝල්ඩරයේ ඇති අතර අවසන් වන්නේ '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');
}

ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 9, ක්‍රෝම් 21 සහ ෆයර්ෆොක්ස් 14 සමඟ මෙය පරීක්ෂා කරන ලදී.

Question 8

මෙම CSS භාවිතා කරන්න:

background: url('img.png') no-repeat; 
background-size: 100%;

Question 9

ඔබට ඇත්ත වශයෙන්ම img ටැගය සමඟ පසුබිම් රූපයක් ලෙස සමාන බලපෑමක් ලබා ගත හැකිය. ඔබට එහි z- දර්ශකය සියල්ලටම වඩා පහත් කොට, පිහිටීම සකසා ගත යුතුය: නිරපේක්ෂ සහ පෙරබිමෙහි ඇති සෑම පෙට්ටියක් සඳහාම විනිවිද පෙනෙන පසුබිමක් භාවිතා කරන්න.

Question 10

එය 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;
}

Question 11

ඔබට මෙම පන්තිය ඔබේ 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;
}

එය ක්‍රියාත්මක වන්නේ:

සෆාරි 3 හෝ ඊට පසු
ක්‍රෝම් කුමක් හෝ පසුව
ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 9 හෝ ඊට පසු
ඔපෙරා 10 හෝ ඊට පසු (ඔපෙරා 9.5 සහය දක්වයි background-size, නමුත් මූල පද නොවේ)
ෆයර්ෆොක්ස් 3.6 හෝ ඊට පසු (ෆයර්ෆොක්ස් 4 විකුණුම්කරු නොවන උපසර්ග අනුවාදයට සහය දක්වයි)

Question 12

බහාලුම් ප්‍රමාණය මත පදනම්ව ඔබේ රූප නිසි ලෙස පරිමාණය කිරීම සඳහා, පහත සඳහන් දෑ භාවිතා කරන්න:

background-size: contain;
background-repeat: no-repeat;

Question 13

මම මෙය භාවිතා කරන අතර එය සියලු බ්‍රව්සර් සමඟ ක්‍රියා කරයි:

<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>

Question 14

ස්තූතියි!

නමුත් පසුව එය ගූගල් ක්‍රෝම් සහ සෆාරි බ්‍රව්සර් සඳහා ක්‍රියා නොකරයි (දිගු කිරීම වැඩ කරන නමුත් පින්තූරවල උස මි.මී. 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, ශරීරය {උස: 100%;}
# පිටුව {පසුබිම: #ffffff; උස: ස්වයංක්‍රීය! වැදගත්; උස: 100%; අවම උස: 100%; පිහිටීම: සාපේක්ෂ;}

එකතු කරන අතරතුර මට පින්තූරය සමඟ Drupal තුළ නව බ්ලොක් එකක් සෑදිය යුතුය class=stretch:

<img alt = "" class = "දිගු" src = "pic.url" />

එම Drupal කොටසෙහි සංස්කාරකය සමඟ පින්තූරයක් පිටපත් කිරීම ක්‍රියා නොකරයි; යමෙකුට සංස්කාරකය ආකෘතිගත නොකළ පෙළකට වෙනස් කළ යුතුය.

Question 15

100% පළල සහ උස සමඟ නිරපේක්ෂ බෙදීම් සහිත රූපය සමඟ මම එකඟ වෙමි. ඔබ ශරීරය සඳහා 100% පළල සහ උස CSS තුළ තබා ඇති බවට වග බලා ගන්න. මෙම ක්‍රමය සමඟ ඔබ සොයා ගන්නා තවත් ගැටළුවක් නම්, පෙළ තෝරාගැනීමේදී, තේරීම් ප්‍රදේශයට සමහර විට පසුබිම් රූපය ඇතුළත් විය හැකි අතර, එය සම්පූර්ණ පිටුව තෝරාගත් තත්වයට පත්කිරීමේ අවාසනාවන්ත බලපෑමක් ඇති කරයි. user-select:noneCSS රීතිය භාවිතා කිරීමෙන් ඔබට මෙය වටහා ගත හැකිය :

<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>

නැවතත්, ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් මෙහි නරක පුද්ගලයා වේ, මන්ද එය පරිශීලක තේරීමේ විකල්පය හඳුනා නොගන්නා හෙයිනි - ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 10 පෙරදසුන පවා එයට සහය නොදක්වයි, එබැවින් පසුබිම් රූප තෝරා ගැනීම වැළැක්වීම සඳහා ඔබට ජාවාස්ක්‍රිප්ට් භාවිතා කිරීමේ අවස්ථාව ඇත (නිදසුනක් ලෙස, http : //www.felgall.com/jstip35.htm ) හෝ CSS 3 පසුබිම්-දිගු කිරීමේ ක්‍රමය භාවිතා කිරීම.

එසේම, SEO සඳහා මම පසුබිම් රූපය පිටුවේ පහළට තබමි, නමුත් පසුබිම් රූපය පැටවීමට වැඩි කාලයක් ගත වුවහොත් (එනම් මුලින් සුදු පසුබිමක් සහිතව), ඔබට පිටුවේ ඉහළට යා හැකිය.

Question 16

පසුබිම් රූපයක් මුළු පිටුවටම දිගු නොකොට කේන්ද්‍රගත කර පරිමාණය කිරීමට මට අවශ්‍ය වූ අතර දර්ශන අනුපාතය පවත්වා ගැනීමට මට අවශ්‍ය විය. වෙනත් පිළිතුරු වල යෝජනා කර ඇති වෙනස්කම් වලට ස්තූතිවන්ත වන පරිදි මෙය මට ප්‍රයෝජනවත් විය:

සබැඳි රූපය: ------------------------

<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%;
}

Question 17

පරිපූර්ණ පරිමාණ පසුබිම් රූපය සාක්ෂාත් කර ගැනීම සඳහා මම පසුබිම්-එක්ස් සීඑස්එස් ගුණාංගවල සංයෝජනයක් භාවිතා කළෙමි.

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

මෙමඟින් පසුබිම සෑම විටම මුළු බ්‍රව්සර කවුළුවම ආවරණය වන අතර පරිමාණය කිරීමේදී කේන්ද්‍රගතව පවතී.

Question 18

Backstretch ප්ලගිනය භාවිතා කරන්න . කෙනෙකුට පින්තූර ස්ලයිඩ කිහිපයක් පවා තිබිය හැකිය. එය බහාලුම් තුළ ද ක්‍රියාත්මක වේ. උදාහරණයක් ලෙස කෙනෙකුට පසුබිම් රූපයකින් ආවරණය කළ හැක්කේ පසුබිමේ කොටසක් පමණි.

මට එය වැඩ කිරීමට පවා හැකි බැවින් එය ප්ලගිනය භාවිතා කිරීම පහසු බව ඔප්පු කරයි :).

Question 19

ඔබට අන්තර්ගතය තිරස් අතට කේන්ද්‍රගත කර ගැනීමට අවශ්‍ය නම්, මෙවැනි සංයෝජනයක් භාවිතා කරන්න:

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

මෙය ලස්සන වනු ඇත.

Question 20

මෙම CSS භාවිතා කරන්න:

background-size: 100% 100%

Question 21

border-image : yourimageරූපය මායිම දක්වා පරිමාණය කිරීමට ඔබට දේපල භාවිතා කළ හැකිය . ඔබ පසුබිම් රූපය ලබා දුන්නද, මායිම් රූපය එයට උඩින් ඇද ගනු ඇත.

මෙම border-imageඔබේ විලාස පත ඔබ Google Chrome හෝ Firefox භාවිතා කරන්නේ නම් CSS 3. සහාය නොවන කොහේ හරි, මම නිර්දේශ ක්රියාත්මක නම් දේපල ඉතා ප්රයෝජනවත් වේ background-size:coverදේපල ම.

Question 22

එක් රූපයක් භාවිතා කරමින් මෙය සාක්ෂාත් කර ගැනීමට ඔබට අවශ්‍යද? රූප දෙකක් භාවිතා කරමින් දිගු පසුබිමකට ඔබට සැබවින්ම සමාන කළ හැකි බැවිනි. උදාහරණයක් ලෙස PNG රූප.

මම මීට පෙර මෙය කර ඇති අතර එය එතරම් අපහසු නොවේ. ඇරත්, දිගු කිරීම පසුබිමේ ගුණාත්මක භාවයට හානියක් වනු ඇතැයි මම සිතමි. ඔබ විශාල රූපයක් එකතු කළහොත් එය මන්දගාමී පරිගණක සහ බ්‍රව්සර් වේගය අඩු කරයි.

Question 23

පහත සඳහන් දෑ මා වෙනුවෙන් වැඩ කළේය.

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

එය සමස්ත පසුබිම විවිධ මානයන්ගෙන් ආවරණය කිරීමට ක්‍රියා කළේය