Блог

Главная - Вопросы по программированию - Создание пунктирного фона для текстовой области

Создание пунктирного фона для текстовой области

#css

#css

Вопрос:

У меня проблемы с созданием такого фона.

Изображение

Я пробовал радиальный градиент, но он выглядит не очень хорошо. Последнее, что я сделал, — это пунктирный фон с помощью линейного градиента. Но даже у него есть некоторые проблемы с фоном.

 background-image: -webkit-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%),
    -webkit-linear-gradient(bottom, rgba(128,128,128,1) 1%, rgba(128,128,128,0) 5%, rgba(128,128,128,0) 10%);

Спасибо всем, кто участвует

Ответ №1:

Вы можете попробовать SVG в качестве фона. У вас должно быть лучшее отображение, чем радиальный градиент:

 textarea {
  line-height:1.5em;
  font-size:18pw;
  height:200px;
  width:200px;
  background:
   url('data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 6 6"><circle cx="3" cy="3" r="2" fill="red" /></svg>') 
     0 1em/8px 1.5em 
     yellow;
}  
 <textarea>
some content here
also here
</textarea>

Для пунктирного рассмотрим повторяющийся градиент:

 textarea {
  line-height:1.5em;
  font-size:18pw;
  height:200px;
  width:200px;
  background:
     repeating-linear-gradient(to right , transparent 0 5px,yellow 0 8px),
     repeating-linear-gradient(to bottom, transparent 0 calc(1.5em - 2px),#000 0 1.5em)
     yellow;
}  
 <textarea>
some content here
also here
</textarea>