CSS Background Image Replacement Tutorial

Поделиться
HTML-код
  • Опубликовано: 16 окт 2024

Комментарии • 12

  • @HBCult
    @HBCult 13 лет назад

    Do you always need to be specific on the width of a picture? Or is there a default setting with CSS for this?

  • @nguyenhoang1553
    @nguyenhoang1553 6 лет назад +2

    use this for replace images background: font-size: 80px;
    font-weight: 1000;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
    background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );

  • @user-gu5cs2wt9g
    @user-gu5cs2wt9g 4 года назад

    Do you have a link where I can learn to make an ugly header like that. I like to learn the multi-color lettering technique.

  • @troller4jesus
    @troller4jesus 10 лет назад

    is it better to use jpg or png?
    I thought I could only make image transparent background with png

    • @davidfont2596
      @davidfont2596 9 лет назад

      Garry S Remember, GIF also has transparency.

    • @troller4jesus
      @troller4jesus 9 лет назад

      kk ty I will try it

    • @troller4jesus
      @troller4jesus 9 лет назад

      is gif the format for an image sprite? is that the preferred format or the only format?

    • @davidfont2596
      @davidfont2596 9 лет назад

      Try the format. If it doesn't work, save the image as something else.

    • @Kwisatsoundman
      @Kwisatsoundman 7 лет назад

      If you need an image with a transparent background, I recommend you to use the png format, that has a better compression algorithm than the gif format. Also, png preserves Alpha transparency, whereas gif is only able to restitute binary transparency.

  • @chickenbathadult
    @chickenbathadult 11 лет назад

    thank you :)

  • @TheRoxas13th
    @TheRoxas13th 9 лет назад

    What is the purpose behind the rule "Display: block" ?

    • @Kwisatsoundman
      @Kwisatsoundman 9 лет назад +1

      +TheRoxas13th An hyperlink is by default an inline element. So, by displaying it as a block element, you are then able to give it a width and a height. Why doing this ? Because, in this particular case, we want to assign to the hyperlink the exact same dimensions as its parent container, that is to say the H1 element. The final purpose is to make this H1 clickable from its entire surface. (Otherwise, the user would never see that the H1 title is ALSO a hyperlink.)