Аналоги background-image

#html #css #вёрстка

Верстаю сайт. Нужно поместить цифры 01 как на скриншоте. Есть ли какие-нибудь методики,
кроме использования background-image?
    

Ответы

Ответ 1

Пример



*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body{
    background: #fff;
    font-family: 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.4;
}
.b-articles {
    counter-reset: countArticle;
    list-style-type: none;
}
.b-article {
    position: relative;
    padding: 15px;
}
.b-article:before {    
    content: counter(countArticle, decimal-leading-zero) " "; 
    counter-increment: countArticle;
    position: absolute;
    top: 0;
    width: 100%;
    font-size: 80px;
    color: rgba(0,0,0,0.1);
    z-index: -1;
}

    

        
Title
        

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
justo dui, maximus eget venenatis quis, euismod at sem. Nulla sodales est nec elementum
efficitur. Ut non egestas justo. Pellentesque habitant morbi tristique senectus et
netus et malesuada
    
    

        
Title
        

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
justo dui, maximus eget venenatis quis, euismod at sem. Nulla sodales est nec elementum
efficitur. Ut non egestas justo. Pellentesque habitant morbi tristique senectus et
netus et malesuada
    
    

        
Title
        

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
justo dui, maximus eget venenatis quis, euismod at sem. Nulla sodales est nec elementum
efficitur. Ut non egestas justo. Pellentesque habitant morbi tristique senectus et
netus et malesuada
    



Ответ 2

Нужно разместить блок с цифрами под блоком с контентом. Для этого у блока с цифрами
нужно установить position: absolute, а у блока с контентом position: relative. Пример:



.section {
  position: relative;
}

.section:before {
  content: '01';
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  font-size: 80px;
  opacity: .1
}

.content {
  position: relative;
  z-index: 10;
}

  

    
About us
    

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo
dui, maximus eget venenatis quis, euismod at sem. Nulla sodales est nec elementum efficitur.
Ut non egestas justo. Pellentesque habitant morbi tristique senectus et netus et malesuada
      fames ac turpis egestas. Cras eget dui vel magna tincidunt malesuada. Maecenas
porttitor mauris mi, vehicula egestas justo consequat a. Quisque facilisis felis eget
ultrices varius. Curabitur lacinia placerat consectetur. Vestibulum venenatis nunc
      in rhoncus malesuada. Phasellus vel pharetra elit. Vivamus vitae imperdiet
lorem, non euismod ipsum.
  



Ответ 3

Добавить img тегом , а текст что идет поверх на position absolute.
Как вариант.