мәтіннен кейін фон суреті орнатыңыз

Менде фондық сурет салғым келетін тақырып элементі бар, бірақ оны соңына қойғым келеді. Мәтіннің ені мәтіннің соңынан кейін әрқашан қалады. Мүмкін бе? Қалай?

Here is my dynamic text



11
Мен қоюға болады, бірақ мәтіннен кейін оны көрсету үшін CSS қандай болады?
қосылды автор coure2011, көзі
Сіз оған біржолақты және имг-ру қоймайсыз ба?
қосылды автор Brewal, көзі
жақсы, негізінен ештеңе жоқ. Span және img - кірістірілген элементтер
қосылды автор Brewal, көзі
Келесі әрекеттерді көріңіз: header {background: url ('your-image-path');
қосылды автор Venkat.R, көзі
мәтінді жоғары/төменгі фондық суреттің үстінен салыңыз. немесе үлгіні бөлісе аласыз ба?
қосылды автор Venkat.R, көзі

8 жауаптар

Егер сіз шынымен артынан қойғыңыз келсе, мәтінді псевдоэлементтерді қолданыңыз:

h1:after { content:url(myimage.png); }

Sample here.

Егер сіз нақты өңдік кескінге ие болғыңыз келсе, h1 параметрін display: inline деп өзгертсеңіз, мұны тек мұны жасай аласыз ата-анасының толық еніне дейін созылады, осылайша мәтіннің өлшеміне қатысты барлық сілтемелер жоғалады.

Барлық қалған шешімдер (мұнда айтылғандарды қоса алғанда) HTML түзетулерін өзгертуді талап етеді және олар таза CSS шешімдері болып табылады.

21
қосылды
Бұл барлық браузерлерде үйлесімді ме? IE-дың ескі нұсқаларын сезінуді қолдамайды ма?
қосылды автор Liam, көзі
Мен IE7 аз немесе көп өлгенін келісемін. . Мақсатты аудиторияға байланысты, менің ойымша, нарықтағы үлес сіз қай мемлекеттің қолы жететініне байланысты өзгереді және т.б. Сонымен қатар, нарықтағы үлестің статистикасы ең үздік болып табылады.
қосылды автор Liam, көзі
@xec Менің IA7-трафиктен жеткілікті трафик жеткілікті деп санайтын менің Google талдаушысы - біз оны қолдамаған болсақ, ақша айырбастағаны үшін: P Мен қарама-қарсы емеспін, сіздің мақсатыңыз. Мен үшін бұрынғысынша ескі браузерлерді қолданып, оларды қолдануға тыйым саламын
қосылды автор Liam, көзі
IE8 + . Бір жолдық синтаксисті қолданыңыз, оны барлық браузерлер қолдайды (қос колонымен IE9 +). IE7 - көп немесе аз өлгендер бақытты және сіз жаңа сайттарда олар үшін түзету материалдарын жібермеуіңіз керек.
қосылды автор Niels Keurentjes, көзі
Егер сіз өзіңіздің сайтыңыз үшін өлген және көмілген браузерлерді қолдағыңыз келсе (коммерциялық сайттар үшін әрдайым ақымақ немесе ақымақтық емес), бірақ егер олардың біреуі өздерінің 8 жастағы браузерлерін қолдағысы келетінін нақты сұрамаса, Мен оларды жауаптарымда қарастырмаймын.
қосылды автор Niels Keurentjes, көзі
Сондай-ақ, «қолдау» және «бірдей тәжірибе беру» арасындағы айырмашылық бар. Мен бүгінгі күннің өзінде көптеген сайттарды IE7-режимінде тексеріп жатырмын, бірақ әлі де қол жетімді екендігін тексеру үшін ғана. Pixel-perfect бірдей, әдемі браузерлермен жасайтын салқын заттармен енді ғана істей алмайды.
қосылды автор Niels Keurentjes, көзі
Менің ойымша, бұл жігіт тек осы сұраққа ие болды +1
қосылды автор Mr. Alien, көзі
@Liam сізде шағымды қолдайтын кез-келген көздер бар ма? IE7 қартайған сияқты және бұл жолмен емдеу керек :)
қосылды автор xec, көзі

Сол сияқты бірнәрсе:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

h1
{
background-image:url(https://s.gravatar.com/avatar/c6a0ac3e18f1cd8d0f1be4c2e3a4cfbd?s=32&d=identicon&r=PG);
background-repeat:no-repeat;
background-position:right;
padding-right:40px;
display:inline-block;
}

Here is my dynamic text

</div> </div>

Осылайша, суретті оң жаққа толтырады, сонда ол әрқашан сіздің мәтініңізден тыс. display: inline-block параметрі маңызды, себебі ол бүкіл сызықты толтырады

3
қосылды

Simply at a span for that background image as a child of

, like this:

Here is my dynamic text


CSS:

h1 {
   position: relative;
}

.chevron {
   background: url(images/chevron.jpg) no-repeat 0 0;
   width: xxpx;   /* width and height of image */
   height: xxpx;
   position: absolute;
   right: 0;
   top: xxpx;  /* adjust the position of the image to the heading text from the top */
}
3
қосылды

Сіз қолдана аласыз: кейін сіздің CSS сияқты

h1:after
{
   background:url(image path)no-repeat;/* apply your image here */
    content:" ";
    position:absolute;
    width:999em;
    height:25px;
    margin:10px 0 0 5px;
} 

look for example http://jsbin.com/uzorew/1

3
қосылды

Very simple <div class="content">

Header

</div>

тақырыпты ішіне түсіріңіз

2
қосылды
Мұнда шешім жақсы, бірақ мәселе тек CSS ретінде белгіленеді, сондықтан ОП деп ойлаймын CSS-ді тек шешім іздейді
қосылды автор WongKongPhooey, көзі

осы CSS сенімді бола аламын ба:

h1 {
    height:25px;
    overflow:hidden;
    position:relative;
}
h1:after {
    background:red;/* apply your image here */
    content:" ";
    position:absolute;
    width:999em;
    height:25px;
    margin:0 0 0 5px;
}

сіздің html:

   

Here is my dynamic text

 
0
қосылды

Pseudo element background image

Кейбір жауаптар CSS-нің : кейін пайдалануын ұсынғанмен, ешқандай (менің орналастыру кезінде) сурет өлшемін қалай өңдеу керектігін көрсетті.

Төменде фондық суретті орнатудың стандартты синтаксисі екенін көресіз мазмұнға қолданыла алады? v = мысалы «rel =» nofollow noreferrer «> position absolute параметріне орнатылған.

width және height сипаттары кейін жалған элементінің өлшемдерін орнатады, бірақ сурет өлшемі background немесе background-size қасиеттері.

i.e. to set the image size to match the size of the after element, use:

background: url( path to image ) no-repeat center/contain;

онда center/contains ортасында болады және сурет болады ;-)

Төмендегі үзіндіде кескін мөлшері дұрыс орнатылмаған болса, нәтижелер дұрыс емес:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

h1:after {
    position: absolute;
     /* no size or position settings */
    background: url(https://lorempixel.com/200/200/) no-repeat;
    width: 1em;
    height: 1em;
    margin-left: .5em;
    content: "";
}

Here is my dynamic text

</div> </div>

Бірақ келесі кескін мөлшері дұрыс орнатылған болса, нәтиже керемет:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

h1:after {
    position: absolute;
     /* size and position set properly */
    background: url(https://lorempixel.com/200/200/) no-repeat center/contain;
    width: 1em;
    height: 1em;
    margin-left: .5em;
    content: "";
}

Here is my dynamic text

</div> </div>

енінің және height қасиеттерін келесідей өзгертіңіз:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

h1:after {
    position: absolute;
     /* size and position set properly */
    background: url(https://lorempixel.com/200/200/) no-repeat center/contain;
     /* width and height of container reduced */
    width: .5em;
    height: .5em;
    margin-left: .5em;
    content: "";
}

Here is my dynamic text

</div> </div>

Оның жауапында Tepken сілтеме жасап, top сипатын пайдаланыңыз тік теңестіру. Сонымен қатар, кейін -нің ата-анасының жағдайы сипатының жиынтығы бар екеніне көз жеткізіңіз немесе сурет top оның әжесі мен әжесі:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

h1 {
     /* the parent must have its position set also */
    position: relative;
}
h1:after {
    position: absolute;
     /* size and position set properly */
    background: url(https://lorempixel.com/200/200/) no-repeat center/contain;
     /* width and height of container reduced */
    width: .5em;
    height: .5em;
    margin-left: .5em;
    content: "";
     /* vertically align the image */
    top: .35em;
}

Here is my dynamic text

</div> </div>

0
қосылды

Сіз фонды div img арқылы қосуды жөн көре аласыз

Here is my dynamic text <div id="dynamicimage"></div>

#dynamicimage{
  background-image: url("images/myimg.png");
}
0
қосылды