Mar a Stèidhichear Ìomhaigh-cùltais gus Duilleag Fit a Lìon

Thoir ùidh shoilleir don làrach-lìn agad le grafaigeachd cùl-raoin

Tha ìomhaighean mar phàirt chudromach de dhealbhaidhean tarraingeach air an làrach-lìn. Tha seo a 'gabhail a-steach cleachdadh ìomhaighean cùl-raoin. Is iad seo na h-ìomhaighean agus na grafaigean a tha air an cleachdadh air cùl raointean de dhuilleag an taca ri ìomhaighean a tha air an taisbeanadh mar phàirt de na duilleagan susbaint. Faodaidh na h-ìomhaighean cùl-raoin seo inntrigeadh lèirsinneach a thoirt do dhuilleag agus do chuideachadh le bhith a 'coileanadh an dealbhadh lèirsinneach a dh' fhaodadh tu a bhith a 'lorg air duilleag.

Ma thòisicheas tu ag obair le ìomhaighean cùl-raoin, gun teagamh, bidh thu a 'ruith a-steach don t-suidheachadh far a bheil thu airson ìomhaigh a shìneadh gus an cuir thu an duilleag.

Tha seo gu h-àraid fìor airson làraichean-lìn fhreagarrach a tha gan lìbhrigeadh gu raon farsaing innealan agus meudan sgrion .

Tha an ùidh a th 'ann a bhith a' sìneadh cùl-ìomhaigh mar mhiann glè chumanta airson luchd-dealbhaidh lìn seach nach eil a h-uile dealbh freagarrach ann an àite làrach-lìn. An àite a bhith a 'suidheachadh meud stèidhichte, le bhith a' sìneadh an ìomhaigh, leigidh e sùbailte gus an duilleag a choileanadh, ge bith dè cho farsaing no cho cumhang ' sa tha uinneag a' bhrabhsair .

Is e an dòigh as fheàrr air ìomhaigh a shìneadh a tha freagarrach air cùl duilleag a bhith a 'cleachdadh seilbh CSS3 , airson meud cùl-raoin. Seo eisimpleir a tha a 'cleachdadh ìomhaigh cùil airson corp duilleag agus a tha a' suidheachadh na meud gu 100% gus am bi e daonnan a 'sìneadh gus an fhrèam a chur air an sgrìn.

body {
cùl-fhiosrachadh: url (bgimage.jpg) gun ath-aithris;
meud cùl-raon: 100%;
}

A rèir caniuse.com, tha an togalach seo ag obair ann an IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, agus air na prìomh bhrabhsairean siubhail. Tha seo a 'còmhdach dhut airson na brabhsairean ùra a tha rim faighinn an-diugh, a tha a' ciallachadh gum bu chòir dhut an togalach seo a chleachdadh gun eagal nach obraich e air scrion cuideigin.

A 'Cur Bun-fhiosrachadh Stèidhichte anns na Bràistearan as sine

Tha e glè dhuilich gum feumadh tu taic a thoirt do shealladairean sam bith nas sine na IE9, ach smaoinich sinn gu bheil dragh ort nach eil IE8 a 'toirt taic don togalach seo. Anns an t-suidheachadh sin, faodaidh tu cùl-raon sìmplidh a bhriseadh. Agus is urrainn dhut ro - leasachain a 'bhrabhsair a chleachdadh airson Firefox 3.6 (-moz-background-size) agus Opera 10.0 (-o-back-size).

Is e an dòigh as fhasa a bhith a 'briseadh ìomhaigh cùl-raon sìmplidh a sgaoileadh air feadh na duilleige gu lèir. An uairsin cha bhi àite a bharrachd agad a dhìth no feumaidh tu dragh a dhèanamh gu bheil an teacsa agad a 'freagairt anns an raon shìnte. Seo mar a nì thu e:


id = "bg" />

  1. An toiseach, dèan cinnteach gu bheil àirde 100%, 0 iomill, agus 0 plocadh air na h-eileamaidean HTML BODY aig gach brabhsairean. Cuir na leanas ann an ceann do sgrìobhainn HTML:
  2. Cuir ris an ìomhaigh a tha thu ag iarraidh a bhith mar chùl-raon mar a 'chiad eileamaid den duilleag-lìn, agus thoir an id aig "bg":
  3. Suidhich an ìomhaigh cùil gus am bi e air a shuidheachadh aig a 'mhullach agus air an làimh chlì agus 100% a leud agus 100% a dh' àirde. Cuir seo ris an duilleag stoidhle agad:
    img # bg {
    suidheachadh: stèidhichte;
    top: 0;
    clì: 0;
    leud: 100%;
    àirde: 100%;
    }
  4. Cuir a h-uile susbaint agad ris an duilleag taobh a-staigh de eileamaid DIV le ìomhaigh de "susbaint". Cuir ris an DIV gu h-ìosal an dealbh:

    An stuth agad gu lèir an seo - a 'gabhail a-steach cinn-sgrìobhte, paragrafan, msaa.

    Thoir fa-near: tha e inntinneach coimhead air do dhuilleag a-nis. Bu chòir an ìomhaigh a bhith air a shealltainn a-mach, ach tha an stuth agad air chall gu tur. Carson? Seach gu bheil an ìomhaigh cùil 100% a dh 'àirde, agus tha an roinn susbaint an dèidh an ìomhaigh ann an sruth na sgrìobhainn - cha nochd a' chuid as motha de na brabhsairean e.
  5. Suidhich an susbaint agad gus am bi e càirdeach agus gu bheil clàr-z de 1. Bheir seo e os cionn ìomhaigh an cùl-raon ann am brabhsairean co-chòrdail ri inbhean. Cuir seo ris an duilleag stoidhle agad:
    tha thu a '
    suidheachadh: càirdeach;
    z-clàr-innse: 1;
    }
  1. Ach chan eil thu deiseil. Chan eil Internet Explorer 6 a rèir riaghailtean agus tha duilgheadasan fhathast ann. Tha iomadh dòigh ann an CSS a shealg bho gach brabhsair ach IE6, ach is e an dòigh as fhasa (agus an ìre as buailtiche duilgheadasan eile adhbhrachadh) beachdan co-cheangailte a chleachdadh. Cuir na leanas às deidh do dhuilleag stoidhle ann an ceann a 'phàipeir agad:
  2. Taobh a-staigh na beachd a chaidh a chomharrachadh, cuir duilleag stoidhle eile le cuid de stoidhlichean gus am faigh IE 6 cluich gu math:
  3. Dèan cinnteach gun dean thu deuchainn ann an IE 7 agus IE 8 cuideachd. Dh'fhaoidte gum feum thu na beachdan atharrachadh gus taic a thoirt dhaibh cuideachd. Ach, dh'obraich e nuair a rinn mi deuchainn air.

Ceart gu leòr - tha seo gu math coltach gu bheil TRAY overkill. Is e glè bheag de làraichean a dh'fheumas taic a thoirt do IE 7 no 8 a-nis, mòran nas lugha de IE6!

Mar sin, tha an dòigh-obrach seo nas sine agus chan eil e riatanach dhut. Tha mi ga fhàgail an seo nas motha mar mhodail de cheasnachadh a thaobh dè na rudan a bu dhuilich mus do chluich na brabhsairean gu lèir cho glic còmhla!

A 'Bualadh air Dealbh Cùl-sgeul Thar Spàs Nas lugha

Faodaidh tu an aon dhòigh a chleachdadh gus ìomhaigh cùl-raon sìmplidh a bhristeadh thar DIV no eileamaid eile air do dhuilleag-lìn. Tha seo beagan nas duilghe oir feumaidh tu a bhith a 'cleachdadh suidheachadh iomlan no ma tha ceistean spiorad neònach agad airson pàirtean eile den duilleig agad.

  1. Cuir an ìomhaigh air an duilleig a tha mi airson a chleachdadh mar chùl-fhiosrachadh.
  2. Anns an duilleag stoidhle, cuir leud agus àirde airson an ìomhaigh. Thoir fa-near, is urrainn dhut ceudadan a chleachdadh airson leud no àirde, ach tha e nas fhasa dhomh atharrachadh le luachan fada airson àirde.
    img # bg {
    leud: 20em;
    àirde: 30m;
    }
  3. Cuir do chuid susbaint ann an div leis an id "susbaint" mar a rinn sinn gu h-àrd:

    An stuth agad uile an seo

  4. Stoidhle gum bi an susbaint div mar an aon leud agus àirde ris an ìomhaigh cùil:
    div # content {
    leud: 20em;
    àirde: 30m;
    }
  5. An uairsin cuir an susbaint suas chun an aon àirde ris an ìomhaigh. Mar sin ma tha an dealbh agad 30m bhiodh stoidhle de dh 'àrd agad: -30em; Na dìochuimhnich cuir clàr-z de 1 air an t-susbaint.
    tha thu a '
    suidheachadh: càirdeach;
    mullach: -30em;
    z-clàr-innse: 1;
    leud: 20em;
    àirde: 30m;
    }
  6. An uairsin cuir a-steach z-index de -1 airson luchd-cleachdaidh IE 6, mar a rinn thu gu h-àrd:

A-rithist, le meud cùl-raon a 'faighinn taic don bhrobhsair fharsaing tha e a-nis a' dèanamh, tha an dòigh-obrach seo glè dhuilich gun fheum agus a thoirt seachad mar thoradh air àm a dh'fhalbh. Nam biodh tu airson an dòigh-obrach seo a chleachdadh, dèanaibh cinnteach gun dèan thu deuchainn air an uiread de shealladairean as urrainn dhut.

Agus ma tha an t-susbaint agad ag atharrachadh meud, feumaidh tu meud an t-soithich agad agus an ìomhaigh-cùil atharrachadh, air dhòigh eile, bidh toraidhean neònach agad.