Question

我有一个背景文本框，我使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%;
}

Answer 1

有一种方法可以使用css

使图像透明

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

Refer文件..

Answer 2

您的<div>应该有一些内容。尝试在其中添加占位符：“请在此输入您的描述......”

Answer 3

我已添加新课程#note div，请检查并告知我们。

演示代码

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 4

嗯，首先，我们无法看到您的图片。如果您希望角落透明，则应使用PNG。但我想你的图像可能有圆角，你可以使用css3的背景半径属性。

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

自定义文本框不显示文本

4 个答案: