設置背景圖像后設置背景顏色
[英]Setting background color after setting background image
問題描述
以下是用於設置背景圖片和背景圖片的html-javascript代碼。
<html>
<link rel="stylesheet" type="text/css" href="try2.css">
<body>
Choose the color<br>
<div class="foo" id="#13b4ff" style="background-color:#13b4ff;"></div>
<div class="foo" id="ab3fdd" style="background-color:#ab3fdd;"></div>
<div class="foo" id="ae163e" style="background-color:#ae163e;"></div>
<br><br>
<div id="myframe1" style="padding:5px;width:300px;height:400px;border:1px solid black;">
<p><img src="img-thing.png" style="width:200px;height:200px;"/><p>
</div>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('.foo').click(function(){
var str1 = $(this).attr('id');
var myframe = document.getElementById('myframe1');
myframe.style.backgroundColor=str1;
myframe.style.width=300;
myframe.style.height=400;
});
});
</script>
<div><input type='file' onchange="readURL(this);" />
<img id="blah"/></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#myframe1').css({
'background':'url('+e.target.result +')',
'background-size':'310px 410px'
});
};
reader.readAsDataURL(input.files[0]);//To display images uncomment this
}
}
</script>
</body>
</html>
顏色的CSS文件是（以防萬一，您也需要查看）
.foo {
float: left;
width: 20px;
height: 20px;
margin: 5px 5px 5px 5px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
}
現在的問題是：我希望用戶可以先單擊“上傳圖像”選項，然后將圖像上傳為背景。 但是一旦完成，就不允許用戶將顏色作為背景。 如何解決？ 相反，如果先選擇顏色然后再選擇圖像，則圖像可以覆蓋為背景。我希望兩者必須能夠彼此覆蓋。 為了方便起見，我還提供了fiddle鏈接： 這里也是fiddle中的另一個問題，其他顏色沒有顯示，但是它們在我的html文件中有效。
3 個解決方案
解決方案1
2 已采納 2014-06-17 04:07:58
解決方案2
1 2014-06-17 04:05:01
我認為您可以通過采用兩個DIV來實現，其中一個DIV用於渲染背景圖像，另一個DIV用於渲染背景顏色。
通過更改DIV的“ z-index”，可以在頂部或底部顯示COLOR。
希望這可以幫到你 。
解決方案3
1 2014-06-18 00:59:01
以下代碼應在主流瀏覽器下工作。 試試看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<style>
#DivBgColor,#DivBgImage{
position:absolute;
left:100px;
top:100px;
width:300px;
height:300px;
}
#DivBgColor{background-color:red;z-index:2}
#DivBgImage{background-image: url(https://s.yimg.com/rz/l/yahoo_en-US_f_p_142x37.png);background-repeat: no-repeat;z-index:4}
</style>
<script language=javascript>
function makeColorAbove(){
var objColor = document.getElementById("DivBgColor");
var objImage = document.getElementById("DivBgImage");
objColor.style.zIndex=2;
objImage.style.zIndex=1;
}
function makeImageAbove(){
var objColor = document.getElementById("DivBgColor");
var objImage = document.getElementById("DivBgImage");
objColor.style.zIndex=1;
objImage.style.zIndex=2;
}
</script>
<body>
<div id="DivBgColor" ></div>
<div id="DivBgImage"></div>
<input type=button value="makeColorAbove" onclick="makeColorAbove()">
<input type=button value="makeImageAbove" onclick="makeImageAbove()">
</body>
</html>
使用圖像和文本設置畫布的背景色
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.