Пользовательское текстовое поле не отображает текст

У меня есть текстовое поле, на котором есть фон, я сделал div редактируемым, но когда я набираю, там ничего нет. Существует также проблема, когда фоновое изображение не является полным квадратом, поэтому на углах, которые действительно раздражают меня, есть белый цвет. есть ли способ сделать белые части прозрачными, чтобы пользователь мог писать только на изображении.Пользовательское текстовое поле не отображает текст

HTML

<!DOCTYPE HTML> 
<html> 


<head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
    <link rel="stylesheet" type="text/css" 
      href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $("#note").resizable(); 
      $("#note").draggable(); 
     }); 
    </script> 
    <title>Stickynote</title> 
    <img src="images/logo.png"> 
</head> 
<body> 
<div id="note" contenteditable="true"> 
</div> 
</body> 
</html>

CSS

body { 
background-image:url("images/background.jpg"); 
background-repeat: no-repeat; 
background-size: 100% 100%; 
} 

html { 
height: 100%; 
} 
html img{ 
display: block; 
margin-left: auto; 
margin-right: auto 

} 
#note 
{ 
width: 100px; 
height: 100px; 
background-image: url("images/stickynote.jpg"); 
background-repeat: no-repeat; 
background-size: 100% 100%; 
}

источник

2015-08-03 Gusic industry

могли бы вы воспроизвести проблему в скрипку и поделиться ссылкой с нами .. – Lal

Незнайка, если это поможет, но это удобно http://jsfiddle.net/qseqadnt/ –

Ну, для начала, мы не можем видеть изображения. Если вы хотите, чтобы углы были прозрачными, вы должны использовать PNG. Но я полагаю, что ваши изображения могут иметь закругленные углы, и вы можете просто использовать свойство css3 background-radius.

body { 
    background: url('http://cdn.backgroundhost.com/backgrounds/subtlepatterns/always_grey.png'); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
} 
html { 
    height: 100%; 
} 
html img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto 
} 
#note { 
    width: 100px; 
    height: 100px; 
    background: url('http://cdn.backgroundhost.com/backgrounds/subtlepatterns/arches.png'); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
    border-radius: 10px 10px; 
    padding: 5px; 
}

https://jsfiddle.net/zh7Ljjev/

На другом вопросе, вы упоминаете редактируемой DIV. Кажется, это работает отлично для меня, поэтому я не могу помочь вам в том, что с ним не так. Иногда я забываю изменить цвет текста на цвет, читаемый на этом фоновом изображении, но не видя фонового изображения, я не могу сказать, если это проблема.

Также проверьте CanIUse, чтобы убедиться, что ваш браузер способен что: http://caniuse.com/#feat=contenteditable

источник

2015-08-03 18:35:47 DauntlessRob

Изображение im используется липкая заметка те, что там http://goodpixgallery.com/blank-sticky-note-png-photos/ –

Одна вещь, которую я забыл упомянуть, это ошибка в вашем коде. Вы не хотите использовать '' теги вне элемента body. Возможно, эта ошибка вызывает другие проблемы. Работает ли редактируемое текстовое поле в jsfiddle, который я сделал? – DauntlessRob

Существует способ, чтобы сделать изображение прозрачным с помощью CSS

opacity: 0.4; 
filter: alpha(opacity=40); /* For IE8 and earlier */

Refer документ ..

источник

2015-08-03 18:10:49

Я вижу, но проблема заключается в том, что делает фоновое изображение прозрачным тоже –

@Gusicindustry http://jsfiddle.net/m26vtzt7/ см. этот пример –

У вас должен быть некоторый контент в вашем <div>. Попробуйте положить в него местозаполнитель: «Пожалуйста, введите свое описание здесь ...»

источник

2015-08-03 18:13:29

У меня есть новый класс #note div, пожалуйста, проверьте его и дайте мне знать.

Демо-код

$(function() { 
 
    $("#note").resizable(); 
 
    $("#note").draggable(); 
 
});

body { 
 
background-image:url("images/background.jpg"); 
 
background-repeat: no-repeat; 
 
background-size: 100% 100%; 
 
} 
 

 
html { 
 
height: 100%; 
 
} 
 
html img{ 
 
display: block; 
 
margin-left: auto; 
 
margin-right: auto 
 

 
} 
 
#note 
 
{ 
 
width: 100px; 
 
height: 100px; 
 
background-image: url("images/stickynote.jpg"); 
 
background-repeat: no-repeat; 
 
background-size: 100% 100%; 
 
} 
 
#note div 
 
{ 
 
width: 200px; 
 
font-size: 12px; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 

 

 
<head> 
 
<link rel="stylesheet" type="text/css" href="style.css"> 
 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<link rel="stylesheet" type="text/css" 
 
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
    <title>Stickynote</title> 
 
    <img src="images/logo.png"> 
 

 
</head> 
 

 
<body> 
 

 
    <div id="note" contenteditable="true"> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

источник

2015-08-03 18:15:45

Пользовательское текстовое поле не отображает текст

ответ

Смежные вопросы